html - Dynamically resize objects into equal columns using css -

html - Dynamically resize objects into equal columns using css -

i trying create layout automatically re-sizes widths of of container fit remaining space of parent. sort of this:

the info load in database wasn't sure how possible do. tried recreate layout, before loading objects database cant work out how create lastly container on each line fill remaining space.

css:

ul,li{ list-style:none; } ul{ width:1000px; display:block; height:auto; } li{ float:left; margin:10px; background:red; height:150px; display:block; }

simple loop:

for($x = 0; $x < 20; $x++){ echo '<li style="width:'.rand(150,400).'px"></li>'; }

if explain way dynamically resize lastly container of each line create flush appreciate it. don't want utilize template or plugin rather larn how build scratch.

bootstrap defiantly best shot here. bootstrap grid layout using divs , used right responsive.

so illustration if wanted wider column , 2 smaller columns do:

<div class="row"><!--always size of 12 in bootstrap--> <div class="col-md-6"> wider column content in here </div> <div class="col-md-3"> smaller first column content in here </div> <div class="col-md-3"> smaller sec column content in here </div> </div><!--end row div-->

so if take mathematically: row taking own size 12, our col-md-6 dynamically scale 50% of rows width (6 50 % of 12) , our 2 smaller columns dynamically scale 25% of row width (3 25% of 12).

here great tool generating snippets of bootstrap html code

layitout.com

and here can find bootstrap resources might need

getbootstrap

grabbing css best place start, can link straight site in css href.

have fun.

html css css3 dynamic css-float