multicol-span-all-children-height-007-ref.html (1311B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test fragmentation for a nested multi-column container with column-span</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 .outer { 10 column-count: 2; 11 column-fill: auto; 12 column-rule: 6px solid black; 13 width: 400px; 14 height: 110px; 15 } 16 .inner { 17 column-count: 2; 18 column-rule: 3px solid green; 19 box-sizing: border-box; 20 height: 110px; 21 background-color: lightgreen; 22 border: solid purple; 23 } 24 .block1 { 25 background-color: yellow; 26 height: 200px; 27 } 28 .spanner { 29 column-span: all; 30 height: 50px; 31 background-color: lightblue; 32 } 33 .block2 { 34 background-color: yellow; 35 height: 120px; 36 } 37 </style> 38 39 <article class="outer"> 40 <article class="inner" style="border-width: 10px 10px 0;"> 41 <div class="block1">block1</div> 42 </article> 43 <article class="inner" style="border-width: 0 10px;"> 44 <div class="spanner">spanner</div> 45 <div class="block2">block2</div> 46 </article> 47 <article class="inner" style="border-width: 0 10px 10px; height:auto;"> 48 <div class="block2"></div> 49 </article> 50 </article> 51 </html>