Skip to content

Commit ca6ac01

Browse files
BoCupp-MicrosoftBoCupp-Microsoft
committed
Add before/after multicol example
1 parent d9f5de7 commit ca6ac01

File tree

1 file changed

+57
-15
lines changed

1 file changed

+57
-15
lines changed

‎multicolumn-text.html

+57-15
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,79 @@
66
</head>
77
<body>
88
before multi-column - not selected
9-
<div style="column-count: 2;">
9+
<div style="column-width: 100px; column-gap:15px;">
1010
<div>this is not area selected this is not area selected this is not area selected this is not area selected this is not area selected
1111
this is not area selected this is not area selected this is not area selected this is not area selected this is not area selected</div>
12+
<div style="column-span: all; background-color: green; color:yellow;">
13+
SPANNING SPANNING SPANNING
14+
</div>
15+
<div>
16+
not selected
17+
</div>
1218
<div style="font-weight: bold;">this is area selected text this is area selected text this is area selected text this is area selected text
1319
this is area selected text this is area selected text this is area selected text this is area selected text
1420
this is area selected text this is area selected text this is area selected text this is area selected text
1521
this is area selected text this is area selected text this is area selected text this is area selected text
1622
this is area selected text this is area selected text this is area selected text this is area selected text
1723
this is area selected text this is area selected text this is area selected text this is area selected text
1824
this is area selected text this is area selected text this is area selected text this is area selected text</div>
25+
<div>
26+
not not not not
27+
not not not not
28+
not not not not
29+
not not not not
30+
not not not not
31+
not not not not
32+
not not not not
33+
not not not not
34+
not not not not
35+
not not not not
36+
not not not not
37+
not not not not
38+
not not not not
39+
not not not not
40+
not not not not
41+
not not not not
42+
not not not not
43+
not not not not
44+
not not not not
45+
not not not not
46+
not not not not
47+
not not not not
48+
not not not not
49+
not not not not
50+
not not not not
51+
not not not not
52+
not not not not
53+
not not not not
54+
not not not not
55+
not not not not
56+
not not not not
57+
not not not not
58+
not not not not
59+
not not not not
60+
not not not not
61+
</div>
1962
</div>
2063
</div>
21-
after multi-column - selected
64+
<div>after multi-column - selected</div>
2265
<br/>
2366
<br/>
2467
<br/>
2568
<br/>
26-
<div style="contain: strict; height: 200px; width: 1000px;">
27-
<span>
28-
<div style="column-count: 2;">
29-
<div style="font-weight: bold;">this is area selected text this is area selected text this is area selected text this is area selected text
30-
this is area selected text this is area selected text this is area selected text this is area selected text
31-
this is area selected text this is area selected text this is area selected text this is area selected text
32-
this is area selected text this is area selected text this is area selected text this is area selected text
33-
this is area selected text this is area selected text this is area selected text this is area selected text
34-
this is area selected text this is area selected text this is area selected text this is area selected text
35-
this is area selected text this is area selected text this is area selected text this is area selected text</div>
36-
</div>
69+
<div style="contain: strict; height: 340px; width: 656px;">
70+
<div style="display:grid;grid-template-rows:301px;">
71+
<div style="column-fill:auto;column-width: 118px; column-gap:15px; width:384px;">
72+
<div style="width:118px; height:18.8px"></div>
73+
<div style="font-weight: bold;">this is area selected text this is area selected text this is area selected text this is area selected text this is area selected text this is area selected text this is area selected text this is area selected text
74+
this is area selected text this is area selected text this is area selected text this is area selected text
75+
this is area selected text this is area selected text this is area selected text this is area selected text
76+
this is area selected text this is area selected text this is area selected text this is area selected text
77+
this is area selected text this is area selected text this is area selected text this is area selected text
78+
this is area selected text this is area selected text this is area selected text this is area selected text</div>
3779
</div>
38-
after multi-column - selected
39-
</span>
80+
<div style="grid-row:2;width: 656px;">after multi-column - selected</div>
81+
</div>
4082
</div>
4183
</body>
4284
</html>

0 commit comments

Comments
 (0)