multicol-basic-002.html (1708B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 <meta charset="utf-8"> 6 <title>CSS Test: Multi-column element via column-count: [integer]</title> 7 <link rel="author" title="Anselm Hannemann" href="mailto:info@anselm-hannemann.com"/> 8 <link rel="author" title="Håkon Wium Lie" href="mailto:howcome@opera.com"/> 9 <link rel="help" href="http://www.w3.org/TR/css3-multicol/#columns"/> 10 <link rel="match" href="reference/multicol-basic-ref.html"/> 11 <meta name="flags" content="ahem"/> 12 <link rel="reviewer" title="Elika J Etemad" href="http://fantasai.inkedblade.net/contact"> 13 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style type="text/css"> 16 .multicol-wrapper>*{ 17 font: 20px/1 Ahem; 18 } 19 20 div.multicol-wrapper{ 21 border: thin solid black; 22 display: inline-block; 23 margin: 1em auto; 24 width: 360px; 25 } 26 27 .multicol-basic-ref{ 28 background: yellow; 29 width: 360px; 30 column-count: 3; 31 column-gap: 0; 32 column-rule: none; 33 } 34 35 .multicol-basic-ref-item{ 36 background: #000; 37 } 38 39 .item-1{ 40 background: purple; 41 color: purple; 42 } 43 44 .item-2{ 45 background: orange; 46 color: orange; 47 } 48 49 .item-3{ 50 background: blue; 51 color: blue; 52 } 53 </style> 54 </head> 55 <body> 56 <p>Test passes if there are three vertical stripes in the yellow box below: 1st purple, 2nd orange, 3rd blue.</p> 57 <div class="multicol-wrapper"> 58 <div class="multicol-basic-ref"> 59 <span class="multicol-basic-ref-item item-1">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> 60 <span class="multicol-basic-ref-item item-2">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> 61 <span class="multicol-basic-ref-item item-3">XXXX XXXX XXXX XXXX XXXX XXXX XXXX</span> 62 </div> 63 </div> 64 </body> 65 </html>