1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>multicolumn | column-rule</title>
5 <link rel="author" title="Opera Software ASA" href="http://www.opera.com/">
6 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#column-gaps-and-rules">
7 <link rel="match" href="reference/multicol-rule-fraction-3-ref.htm">
8 <meta name="flags" content="ahem">
9 <style type="text/css">
10 body {
11 margin: 0;
12 }
13 body>div {
14 font-family: ahem;
15 font-size: 1em;
16 line-height: 1em;
17 color: black;
18 background: yellow;
19 margin: 1em;
20 border: 1em solid gray;
21 width: 14em;
22 position: relative;
23 orphans: 1;
24 widows: 1;
25
26 column-count: 4;
27 column-gap: 1em;
28 }
29 span {
30 background: blue;
31 position: absolute;
32 top: 0;
33 left: 2.4em;
34 height: 2em;
35 width: 1em;
36 }
37 span+span {
38 left: 6.15em;
39 }
40 span+span+span {
41 left: 9.9em;
42 }
43 </style>
44 </head>
45
46 <body>
47
48 <div>
49 xx xx
50 <span>
51 </span>
52 xx xx
53 <span>
54 </span>
55 xx xx
56 <span>
57 </span>
58 xx xx
59 </div>
60
61 </body>
62 </html>