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