OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .multicol { | |
4 width: 300px; | |
5 height: 100px; | |
6 line-height: 20px; | |
7 border: 5px solid maroon; | |
8 } | |
9 .column { | |
10 width: 100px; | |
11 float: left; | |
12 } | |
13 .multicol[dir="rtl"] > .column { | |
14 float: right; | |
15 } | |
16 .block { | |
17 display: inline-block; | |
18 width: 1em; | |
19 height: 10px; | |
20 background-color: green; | |
21 } | |
22 .opacity { | |
23 opacity: 0.5; | |
24 color: green; | |
25 } | |
26 .relative { | |
27 position: relative; | |
28 top: -4px; | |
29 color: green; | |
30 } | |
31 </style> | |
32 <p> | |
33 Test layers which are fully contained within a single column. | |
34 </p> | |
35 LTR: | |
36 <div class="multicol"> | |
37 <div class="column"> | |
38 line1<br> | |
39 line2<br> | |
40 line3<br> | |
41 line4<br> | |
42 line5<br> | |
43 </div> | |
44 <div class="column"> | |
45 line6<br> | |
46 <div class="block"></div> line7<br> | |
47 line8<br> | |
48 <span class="relative">relative9</span><br> | |
49 line10<br> | |
50 </div> | |
51 <div class="column"> | |
52 line11<br> | |
53 line12<br> | |
54 <span class="opacity">opacity13</span><br> | |
55 line14 | |
56 </div> | |
57 </div> | |
58 | |
59 RTL: | |
60 <div class="multicol" dir="rtl"> | |
61 <div class="column"> | |
62 line1<br> | |
63 line2<br> | |
64 line3<br> | |
65 line4<br> | |
66 line5<br> | |
67 </div> | |
68 <div class="column"> | |
69 line6<br> | |
70 <div class="block"></div> line7<br> | |
71 line8<br> | |
72 <span class="relative">relative9</span><br> | |
73 line10<br> | |
74 </div> | |
75 <div class="column"> | |
76 line11<br> | |
77 line12<br> | |
78 <span class="opacity">opacity13</span><br> | |
79 line14 | |
80 </div> | |
81 </div> | |
OLD | NEW |