multicol-span-all-005-ref.html (1532B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Reference: Test column-span:all with various display types</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 8 <style> 9 .column { 10 column-count: 1; 11 column-rule: 6px solid; 12 width: 400px; 13 outline: 1px solid black; 14 } 15 .spanner { 16 /* column-count: 1 makes this behave like a real spanner. */ 17 outline: 1px solid blue; 18 } 19 fieldset { 20 margin: 0; 21 padding: 0; 22 border: 0; 23 } 24 </style> 25 26 <body> 27 <article class="column"> 28 <div>block1</div> 29 <table class="spanner"> 30 <tr> 31 <td>table as a spanner</td> 32 </tr> 33 </table> 34 <div>block2</div> 35 </article> 36 <br> 37 38 <article class="column"> 39 <div>block1</div> 40 <div class="spanner" style="display: grid;">grid as a spanner</div> 41 <div>block2</div> 42 </article> 43 <br> 44 45 <article class="column"> 46 <div>block1</div> 47 <div class="spanner" style="display: flex;">flex as a spanner</div> 48 <div>block2</div> 49 </article> 50 <br> 51 52 <article class="column"> 53 <div>block1</div> 54 <fieldset class="spanner">fieldset as a spanner</fieldset> 55 <div>block2</div> 56 </article> 57 <br> 58 59 <article class="column"> 60 <div>block1</div> 61 <details open class="spanner">details as a spanner</details> 62 <div>block2</div> 63 </article> 64 <br> 65 66 </body> 67 </html>