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-span</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/#spanning-columns">
7 <link rel="match" href="reference/multicol-span-all-margin-nested-firstchild-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: navy;
18 background: yellow;
19 margin: 1em;
20 border: 1em solid gray;
21 width: 8em;
22 float: left;
23 orphans: 1;
24 widows: 1;
25 overflow: hidden;
26
27 column-count: 4;
28 column-gap: 0;
29 }
30 span, h6 {
31 font-family: ahem;
32 font-size: 1em;
33 font-weight: normal;
34 line-height: 1em;
35 color: black;
36 background: black;
37 padding: 0;
38 margin: 0;
39 display: block;
40 }
41 h6 {
42 margin: 1em 0;
43 width: 11em;
44 column-span: all;
45 }
46 span {
47 color: pink;
48 background: pink;
49 margin: 2em 0;
50 }
51 h6~h6 {
52 color: black;
53 background: black;
54 height: 1em;
55 }
56 h6~h6>span {
57 background: pink;
58 color: pink;
59 margin: -2em 0 0;
60 }
61 </style>
62 </head>
63
64 <body>
65
66 <div>
67 xx xx xx xx
68 xx xx xx xx
69
70 <h6><span>xxxxx</span></h6>
71 <h6><span>xxxxx</span></h6>
72
73 xx xx xx xx
74 xx xx xx xx
75 </div>
76
77 </body>
78 </html>