columnfill-auto.html (1420B)
1 <html> 2 <head> 3 <link rel="stylesheet" type="text/css" href="ahem.css" /> 4 <style> 5 html,body { 6 color:black; background-color:white; font-size:16px; padding:5px; margin:0; 7 } 8 mask { 9 position: absolute; 10 top:0; bottom:0; left:8px; width:5px; 11 background: black; 12 } 13 14 .rel { 15 position: relative; 16 } 17 .columns { 18 column-width: 12em; 19 column-gap: 0; 20 column-fill: auto; 21 height: 8em; 22 font-family: ahem; 23 font-size: 12pt; 24 line-height: 1.1; 25 } 26 a { 27 position: absolute; 28 width: 10px; 29 height: 10px; 30 bottom: 0; 31 left: 0; 32 background: blue; 33 } 34 f { 35 position: fixed; 36 width: 10px; 37 height: 10px; 38 bottom: 0; 39 left: 100px; 40 background: lime; 41 } 42 </style> 43 </head> 44 45 <body> 46 <div class="columns rel"> 47 <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 48 </div> 49 50 <div class="columns rel" style="overflow: hidden"> 51 <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 52 </div> 53 54 <div class="columns rel" style="overflow: hidden"> 55 <f></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 56 </div> 57 58 <div class="columns" style="overflow: hidden"> 59 <a></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 60 </div> 61 62 <div class="columns" style="overflow: hidden"> 63 <f style="left:120px"></f>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed 64 </div> 65 66 <mask></mask> 67 </body> 68 </html>