multicol-span-all-children-height-004a-ref.html (1127B)
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 balancing 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: 2; 11 width: 400px; 12 background-color: lightgreen; 13 } 14 div.container { 15 height: 200px; 16 background-color: pink; 17 } 18 div.block { 19 width: 100px; 20 height: 200px; 21 background-color: yellow; 22 } 23 div.column-span { 24 width: 400px; 25 height: 50px; 26 background-color: lightblue; 27 } 28 </style> 29 30 <article> 31 <div class="container"> 32 <div class="block">block1</div> 33 </div> 34 </article> 35 <div class="column-span">column-span1</div> 36 <article> 37 <div class="container"> 38 <div class="block">block2</div> 39 </div> 40 </article> 41 <div class="column-span">column-span2</div> 42 <article> 43 <div class="container" style="height: 50px;"> 44 <div class="block">block3</div> 45 </div> 46 </article> 47 </html>