multicol-rule-nested-balancing-003-ref.html (962B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test the column rules' block-size with nested 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 .outer { 10 column-count: 2; 11 column-rule: 6px solid black; 12 column-fill: auto; 13 width: 400px; 14 height: 250px; 15 } 16 .inner { 17 column-count: 2; 18 column-rule: 3px solid gray; 19 column-fill: auto; 20 height: 200px; 21 } 22 .inner-block { 23 background-color: lightblue; 24 height: 400px; 25 } 26 .space { 27 height: 50px; 28 } 29 </style> 30 31 <article class="outer"> 32 <article class="inner"> 33 <div class="inner-block"></div> 34 </article> 35 <div class="space"></div> 36 <article class="inner"> 37 <div class="inner-block"></div> 38 </article> 39 <div class="space"></div> 40 </article> 41 </html>