multicol-oof-inline-cb-001.html (1179B)
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 inline-block"> 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 inline-block { 18 display: inline-block; 19 } 20 .cb { 21 position: relative; 22 } 23 abs { 24 position: absolute; 25 background: purple; 26 width: 100px; 27 height: 50px; 28 } 29 abs.p0 { 30 top: 0; left: 0; 31 background: blue; 32 } 33 </style> 34 <body> 35 <!-- OOF with inline-CB across inline-block. --> 36 <section> 37 123 38 <span class="cb"> 39 456<br> 40 <inline-block> 41 7 42 <abs></abs> 43 <abs class="p0"></abs> 44 </inline-block> 45 </span> 46 </section> 47 48 <!-- Same in multicol. --> 49 <section class="columns"> 50 123 51 <span class="cb"> 52 456<br> 53 <inline-block> 54 7 55 <abs></abs> 56 <abs class="p0"></abs> 57 </inline-block> 58 </span> 59 </section> 60 </body>