multicol-oof-inline-cb-002.html (1107B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://www.w3.org/TR/css-multicol-1/#the-multi-column-model"> 3 <link rel="match" href="multicol-oof-inline-cb-001-ref.html"/> 4 <meta name="assert" content="Out-of-flow in inline containing block across block-in-inline"> 5 <link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org" /> 6 <style> 7 section { 8 width: 300px; 9 height: 100px; 10 border: blue 1px solid; 11 } 12 .columns { 13 column-width: 100px; 14 column-fill: auto; 15 height: 100px; 16 } 17 .cb { 18 position: relative; 19 } 20 abs { 21 position: absolute; 22 background: purple; 23 width: 100px; 24 height: 50px; 25 } 26 abs.p0 { 27 top: 0; left: 0; 28 background: blue; 29 } 30 </style> 31 <body> 32 <!-- OOF with inline-CB across block-in-inline. --> 33 <section> 34 123 35 <span class="cb"> 36 456<br> 37 <div> 38 7 39 <abs></abs> 40 <abs class="p0"></abs> 41 </div> 42 </span> 43 </section> 44 45 <!-- Same in multicol. --> 46 <section class="columns"> 47 123 48 <span class="cb"> 49 456<br> 50 <div> 51 7 52 <abs></abs> 53 <abs class="p0"></abs> 54 </div> 55 </span> 56 </section> 57 </body>