multicol-span-all-children-height-005-ref.html (1115B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test the block-size distribution across column-span split in a column-fill:auto multicol container</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 8 <style> 9 article { 10 column-count: 1; 11 width: 200px; 12 background-color: lightgreen; 13 } 14 div.container { 15 background-color: pink; 16 } 17 div.block { 18 width: 100px; 19 height: 100px; 20 background-color: yellow; 21 } 22 div.column-span { 23 width: 200px; 24 height: 50px; 25 background-color: lightblue; 26 } 27 </style> 28 29 <article> 30 <div class="container"> 31 <div class="block">block1</div> 32 </div> 33 </article> 34 <div class="column-span">column-span1</div> 35 <article> 36 <div class="container"> 37 <div class="block">block2</div> 38 </div> 39 </article> 40 <div class="column-span">column-span2</div> 41 <article> 42 <div class="container" style="height: 50px;"> 43 <div class="block">block3</div> 44 </div> 45 </article> 46 </html>