OLD | NEW |
| (Empty) |
1 body { | |
2 margin: 0; | |
3 } | |
4 | |
5 div { | |
6 -webkit-logical-width: 200px; | |
7 -webkit-logical-height: 150px; | |
8 -webkit-column-gap: 30px; | |
9 -webkit-column-rule-width: 10px; | |
10 -webkit-column-rule-style: solid; | |
11 outline: 1px dashed lightblue; | |
12 -webkit-margin-after: 360px; | |
13 -webkit-border-before: 20px solid silver; | |
14 -webkit-margin-start: 20px; | |
15 } | |
16 | |
17 div.horizontal | |
18 { | |
19 -webkit-column-axis: vertical; | |
20 } | |
21 | |
22 div.horizontal.flipped | |
23 { | |
24 -webkit-writing-mode: horizontal-bt; | |
25 } | |
26 | |
27 div.vertical | |
28 { | |
29 -webkit-writing-mode: vertical-lr; | |
30 -webkit-column-axis: horizontal; | |
31 } | |
32 | |
33 div.vertical.flipped | |
34 { | |
35 -webkit-writing-mode: vertical-rl; | |
36 } | |
37 | |
38 span { | |
39 background-color: yellow; | |
40 position: relative; | |
41 } | |
OLD | NEW |