-
Notifications
You must be signed in to change notification settings - Fork 0
/
multicolumn-text.html
84 lines (84 loc) · 4.19 KB
/
multicolumn-text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
before multi-column - not selected
<div style="column-width: 100px; column-gap:15px;">
<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
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>
<div style="column-span: all; background-color: green; color:yellow;">
SPANNING SPANNING SPANNING
</div>
<div>
not selected
</div>
<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
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
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
this is area selected text this is area selected text this is area selected text this is area selected text</div>
<div>
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
not not not not
</div>
</div>
</div>
<div>after multi-column - selected</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 340px; width: 656px;">
<div style="display:grid;grid-template-rows:301px;">
<div style="column-fill:auto;column-width: 118px; column-gap:15px; width:384px;">
<div style="width:118px; height:18.8px"></div>
<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
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
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
this is area selected text this is area selected text this is area selected text this is area selected text</div>
</div>
<div style="grid-row:2;width: 656px;">after multi-column - selected</div>
</div>
</div>
</body>
</html>