column-balancing-nested-000-ref.html (1406B)
1 <!-- 2 Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/licenses/publicdomain/ 4 --> 5 <!DOCTYPE html> 6 <html lang="en-US"> 7 <head> 8 <title>Testing nested balancing column sets</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=822053"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 15 .colset { 16 column-count: 2; 17 column-gap: 1px; 18 column-rule: 1px solid black; 19 border: solid silver; 20 width:30ch; 21 } 22 p { margin: 0; } 23 24 /* balancing column sets deeper than level 2 should only use 1 column */ 25 .colset .colset .colset, 26 .colset .colset .colset .colset { 27 column-count: 1; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="colset"> 33 <p>one one one one one</p> 34 <div class="colset"> 35 <p>two two two two two</p> 36 </div> 37 </div> 38 <br> 39 <div class="colset"> 40 <p>one one one one one</p> 41 <div class="colset"> 42 <p>two two two two two</p> 43 <div class="colset"> 44 <p>three three three three three</p> 45 </div> 46 </div> 47 </div> 48 <br> 49 <div class="colset"> 50 <p>one one one one one</p> 51 <div class="colset"> 52 <p>two two two two two</p> 53 <div class="colset"> 54 <p>three three</p> 55 <div class="colset"> 56 <p>four four four four four</p> 57 </div> 58 </div> 59 </div> 60 </div> 61 </body> 62 </html>