-
Notifications
You must be signed in to change notification settings - Fork 1
/
css-multicol-1.xhtml
71 lines (66 loc) · 2.77 KB
/
css-multicol-1.xhtml
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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS Multi-column Layout Level 1</title>
<style>
#multicol .test {
columns: 2;
column-gap: 9px;
column-rule: 1px solid;
border: 1px solid;
padding: 4px;
}
#multicol .column-span .test .span-all {
column-span: all;
border: 3px solid;
margin: 4px 0;
padding: 4px;
}
#multicol .column-fill .test {
width: 30em;
height: 10em;
line-height: 1.1;
}
#multicol .column-fill .test.balance {
column-fill: balance;
}
#multicol .column-fill .test.auto {
column-fill: auto;
}
</style>
</head>
<body>
<h1>CSS Multi-column Layout Level 1</h1>
<section id="multicol">
<h2>段組</h2>
<div class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum at itaque et sint sequi, quam voluptate libero sapiente nemo dicta deserunt alias? Velit perferendis ipsum accusamus aspernatur veritatis quis quo. Neque aspernatur quis itaque delectus in architecto minima ut cumque.</div>
<ul>
<li>2段組(columns: 2)になっていればOK</li>
<li>段間罫(column-rule)があればOK</li>
</ul>
<section class="column-span">
<h3>段抜き：column-span プロパティ</h3>
<div class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum at itaque et sint sequi, quam voluptate libero sapiente nemo dicta deserunt alias?
<div class="span-all">Velit perferendis ipsum accusamus aspernatur veritatis quis quo.</div>
Dolores officia id, commodi sit tenetur neque aspernatur quis itaque delectus in architecto minima ut cumque.</div>
<ul>
<li>段抜き(column-span: all)のブロックがあればOK</li>
</ul>
</section>
<section class="column-fill">
<h3>段バランス：column-fill プロパティ</h3>
<h4>column-fill: balance</h4>
<div class="test balance">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum at itaque et sint sequi, quam voluptate libero sapiente nemo dicta deserunt alias? Velit perferendis ipsum accusamus aspernatur veritatis quis quo. Neque aspernatur quis itaque delectus in architecto minima ut cumque.</div>
<ul>
<li>高さが固定の段組の枠の中で段の高さが均等になっていればOK</li>
</ul>
<h4>column-fill: auto</h4>
<div class="test auto">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum at itaque et sint sequi, quam voluptate libero sapiente nemo dicta deserunt alias? Velit perferendis ipsum accusamus aspernatur veritatis quis quo. Neque aspernatur quis itaque delectus in architecto minima ut cumque.</div>
<ul>
<li>高さが固定の段組の枠の中で最後の段にだけ空きが残っていればOK</li>
</ul>
</section>
</section>
</body>
</html>