May 31, 201214 yr Does anyone know if I display list items with different heights horizontally across various rows, is it possible to do what I have tried to convey in the following graphic? So instead of the top of the next row being set by the bottom of the longest column, could it slot underneath the list item directly above it? I have tried using display:inline-block and using float but I don't think those will do what I need. Is there a CSS-only way to do this or else some way to do it with JavaScipt? Cheers,
May 31, 201214 yr You can mix float: left; and float: right; to some extent to do what you want, but it won't always work. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Unequal height divs</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style-type: none; } li { border: 1px solid black; } #wrap { width: 310px; background: #eee; overflow: hidden; } .box1 { display: block; float: left; width: 150px; background: #ddd; } .box2 { display: block; float: right; width: 150px; background: #ddd; } .clear { clear: both; width: 100%; height: 0; } </style> </head> <body> <div id="wrap"> <ul> <li class="box1" style="height: 100px;">Box1</l1> <li class="box2" style="height: 250px;">Box2</li> <li class="box1" style="height: 100px;">Box3</li> <li class="box1" style="height: 70px;">Box1</l1> <li class="box2" style="height: 80px;">Box2</li> <li class="box1" style="height: 100px;">Box3</li> </ul> <p class="clear"> </p> <ul> <li class="box1" style="height: 100px;">Box1</l1> <li class="box2" style="height: 250px;">Box2</li> <li class="box1" style="height: 100px;">Box3</li> </ul> </div> </body> </html>
May 31, 201214 yr Author Thanks for the tip. That is close to what I am looking for, but I forgot to add that the width of the container element is fluid. So when it is large enough for 3 per row or 4 per row, I want the list items to line up in a line of 3/4 and then each of the subsequent items to fit directly under the item above. If there are 4 per row, then 5 will sit beneath 1, 6 beneath 2, and so on. Possible?
June 1, 201214 yr Author Cool beans - that looks quite the part. My project is already using YUI3 so I was hoping to use that, but maybe vanilla masonry is appropriate.
Create an account or sign in to comment