column-scroll-marker-001-ref.html (1123B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 #fakegroup > div { 5 float: left; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 width: 50px; 10 height: 50px; 11 } 12 .fakecolumn { 13 float: left; 14 width: 140px; 15 height: 100px; 16 background: yellow; 17 } 18 19 </style> 20 <div style="width:450px; line-height:20px;"> 21 <div id="fakegroup"> 22 <div style="background:hotpink;"><a href="#">*</a></div> 23 <div style="background:cyan;"></div> 24 <div style="background:hotpink;"><a href="#">*</a></div> 25 <div style="background:cyan;"></div> 26 <div style="background:hotpink;"><a href="#">*</a></div> 27 <div style="background:cyan;"></div> 28 <div style="background:hotpink;"><a href="#">*</a></div> 29 <div style="background:cyan;"></div> 30 <div style="background:hotpink;"><a href="#">*</a></div> 31 </div> 32 <div style="display:flow-root; border:15px solid;"> 33 <div class="fakecolumn">First column</div> 34 <div class="fakecolumn">Second column</div> 35 <div class="fakecolumn">Third column</div> 36 </div> 37 </div>