html - How do I allow a bunch of divs to automatically "linebreak" -
i have set of div.box objects in big container div#boxes. so:
/-------------\ | | | [a] [b] [c] | | | | [d] [e] [f] | | | \-------------/ however, want able list boxes .. f , have "linebreak" between c , d done automatically, depending on effective width of outer box.
i tried different variations of display:. thought .box {display: inline; } should work, due reason eludes me, causes boxes displayed in 1 vertical line, though @ least 2 boxes should fit in 1 line. tried combination of div#boxes { display: table; } , div.box { display: table-cell; }. making boxes aligned in 1 horizontal line (which kind of expected).
currently, boxes have same size , outer box has fixed size, allow more flexible layout.
use inline-block value.
.box { display: inline-block }
Comments
Post a Comment