Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: improve-expand-string
Branches Tags
RmlUi
/
Tests
/
Data
/
VisualTests
/
shrink_to_fit_02.rml

shrink_to_fit_02.rml 1.5 KB
Permalink History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 		<title>Shrink-to-fit 2</title>
    4. 

  4. 		<link type="text/rcss" href="../style.rcss"/>
    5. 

  5. 	<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float" />
    6. 

  6. 	<meta name="Description" content="Shrink-to-fit width with differently positioned and floated boxes." />
    7. 

  7. 	<style>
    8. 

  8. 		body {
    9. 

  9. 			background: #ddd;
    10. 

  10. 			color: #444;
    11. 

  11. 		}
    12. 

  12. 		hr {
    13. 

  13. 			margin-top: 15dp;
    14. 

  14. 			margin-bottom: 15dp;
    15. 

  15. 			background-color: #ccc;
    16. 

  16. 		}
    17. 

  17. 		div {
    18. 

  18. 			border: 2dp #444;
    19. 

  19. 			background: #ccf;
    20. 

  20. 		}
    21. 

  21. 		body > div {
    22. 

  22. 			display: inline-block;
    23. 

  23. 			position: relative;
    24. 

  24. 			/*overflow: auto;*/
    25. 

  25. 		}
    26. 

  26. 		body > div > div {
    27. 

  27. 			width: 150dp;
    28. 

  28. 			height: 30dp;
    29. 

  29. 			background: #cfc;
    30. 

  30. 		}
    31. 

  31. 		.absolute {
    32. 

  32. 			position: absolute;
    33. 

  33. 			top: 20dp;
    34. 

  34. 			left: 50dp;
    35. 

  35. 		}
    36. 

  36. 		.relative {
    37. 

  37. 			position: relative;
    38. 

  38. 			top: 20dp;
    39. 

  39. 			left: 50dp;
    40. 

  40. 		}
    41. 

  41. 		.float-left {
    42. 

  42. 			float: left;
    43. 

  43. 		}
    44. 

  44. 		.float-right {
    45. 

  45. 			float: right;
    46. 

  46. 		}
    47. 

  47. 	</style>
    48. 

  48. </head>
    49. 

  49. 

  50. <body>
    51. 

  51. <div>
    52. 

  52. 	Some text
    53. 

  53. 	<div>Block</div>
    54. 

  54. 	Text after
    55. 

  55. </div>
    56. 

  56. <hr/>
    57. 

  57. <div>
    58. 

  58. 	Some text
    59. 

  59. 	<div class="absolute">Absolute</div>
    60. 

  60. 	Text after
    61. 

  61. </div>
    62. 

  62. <hr style="margin-top: 55dp;"/>
    63. 

  63. <div>
    64. 

  64. 	Some text
    65. 

  65. 	<div class="relative">Relative</div>
    66. 

  66. 	Text after
    67. 

  67. </div>
    68. 

  68. <hr/>
    69. 

  69. <div>
    70. 

  70. 	Some text
    71. 

  71. 	<div class="float-left">Float left</div>
    72. 

  72. 	Text after
    73. 

  73. </div>
    74. 

  74. <hr/>
    75. 

  75. <div>
    76. 

  76. 	Some text
    77. 

  77. 	<div class="float-right">Float right</div>
    78. 

  78. 	Text after
    79. 

  79. </div>
    80. 

  80. <hr/>
    81. 

  81. <div>
    82. 

  82. 	<div class="float-left">Float left</div>
    83. 

  83. 	Text after
    84. 

  84. </div>
    85. 

  85. <hr/>
    86. 

  86. <div>
    87. 

  87. 	<div class="float-right">Float right</div>
    88. 

  88. 	Text after
    89. 

  89. </div>
    90. 

  90. <hr/>
    91. 

  91. <div>
    92. 

  92. 	Some text
    93. 

  93. 	<div class="float-left relative">Float relative</div>
    94. 

  94. 	Text after
    95. 

  95. </div>
    96. 

  96. </body>
    97. 

  97. </rml>
    98.