column-height-009-ref.html (1231B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 .item { 5 display: block; 6 width: 50px; 7 height: 40px; 8 margin-bottom: 20px; 9 background: cyan; 10 } 11 .column { 12 float: left; 13 width: 100px; 14 } 15 .rule { 16 float: left; 17 width: 2px; 18 margin-left: 9px; 19 margin-right: 9px; 20 background: black; 21 } 22 </style> 23 <div style="width:340px; height:160px; line-height:20px; background:yellow;"> 24 <div class="column"> 25 <div class="item">a<br>b</div> 26 <div class="item">g<br>h</div> 27 <div class="item">m<br>n</div> 28 </div> 29 <div class="rule" style="height:40px;"></div> 30 <div class="rule" style="position: absolute; top: 68px; left: 108px; height:40px;"></div> 31 <div class="rule" style="position: absolute; top: 128px; left: 108px; height:40px;"></div> 32 <div class="column"> 33 <div class="item">c<br>d</div> 34 <div class="item">i<br>j</div> 35 <div class="item">o<br>p</div> 36 </div> 37 <div class="rule" style="height:40px;"></div> 38 <div class="rule" style="position: absolute; top: 68px; left: 228px; height:40px;"></div> 39 <div class="column"> 40 <div class="item">e<br>f</div> 41 <div class="item">k<br>l</div> 42 </div> 43 </div>