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