fieldset-columns-001.html (1108B)
1 <!DOCTYPE HTML> 2 <html> 3 <body> 4 <style> 5 a { 6 position: absolute; 7 width: 10px; 8 height: 10px; 9 top: 0; 10 left: 0; 11 background: blue; 12 } 13 f { 14 position: fixed; 15 width: 10px; 16 height: 10px; 17 bottom: 0; 18 left: 100px; 19 background: lime; 20 } 21 fieldset { 22 columns: 2; 23 column-fill: auto; 24 border: 1px solid; 25 } 26 .rel { 27 position: relative; 28 } 29 </style> 30 <fieldset class="rel" style="overflow:hidden; width:300px; height:200px;"> 31 <legend>Legend</legend> 32 <p>X 33 <p>X 34 <p>X 35 <p>X 36 <p>X 37 <p>X 38 <p>X 39 <p>X 40 <p>X 41 <p>X 42 <p>X 43 <p>X 44 <p>X 45 <p>X 46 <p>X 47 <p>X 48 <a></a><f></f> 49 </fieldset> 50 <fieldset class="rel" style="columns: 3; column-gap:2em; column-rule:3px solid; column-width:3em; width:600px; height:7em"> 51 <legend>Legend</legend> 52 <p>X 53 <p>X 54 <p>X 55 <p>X 56 <p>X 57 <p>X 58 <a></a><f style="left:120px"></f> 59 </fieldset> 60 <fieldset style="overflow:hidden; width:300px; height:2em;"> 61 <legend>Legend</legend> 62 <p>X 63 <a></a><f style="left:140px"></f> 64 </fieldset> 65 <fieldset style="width:600px; height:2em"> 66 <legend>Legend</legend> 67 <p>X 68 <a></a><f style="left:160px"></f> 69 </fieldset> 70 71 </body> 72 </html>