multicol-rule-nested-balancing-002-ref.html (999B)
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 .outer-block { 23 background-color: lightgreen; 24 height: 200px; 25 } 26 .inner-block { 27 background-color: lightblue; 28 height: 200px; 29 } 30 .space { 31 height: 50px; 32 } 33 </style> 34 35 <article class="outer"> 36 <div class="outer-block"></div> 37 <div class="space"></div> 38 <article class="inner"> 39 <div class="inner-block"></div> 40 <div class="inner-block"></div> 41 </article> 42 </article> 43 </html>