CSS плавает с максимальной шириной?

Question

У меня есть 5 дивы и я пытаюсь их структурировать следующим образом:

1. дивы имеют минимальный размер 100px
2. Родитель должен показать, как много из них, насколько это возможно на первый ряд; оставшиеся divs должны быть обернуты в новую строку (или, если необходимо, больше строк)
3. Если первая строка имеет неоптимальный размер, делители должны распределяться одинаково (то есть размер родителя - 250 пикселей - на первом месте есть 2 divs строка имеет ширину 125px).

Некоторые примеры того, что я пытаюсь достичь:

200px:http://s22.postimg.org/5hj8m5qrl/es3.png
250px:http://s22.postimg.org/ikev5fgzl/es1.png
300px:http://s22.postimg.org/jy6i0qg8x/es2.png

Если размер parent - 450px, должно быть 4 divs, имеющих ширину 112.5px каждый.

Это то, что я пробовал, но у меня только завершена упаковка. Я не имею ни малейшего представления о том, как их размер:

HTML:

<div class="parent"> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div> 
<div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget vulputate justo. Phasellus non mi metus.</div> 
<div class="clear"></div> 

CSS

.parent{ 
    width: 250px; 
    border: 2px solid red; 
} 

.parent .child { 
    width: 96px; 
    border: 2px solid black; 
    float: left; 
} 

.parent .clear { 
    clear: both; 
} 

Там будет ссылка на jfiddle: http://jsfiddle.net/Vbjv5/

Я ищет возможное решение CSS, однако, если это невозможно в CSS, ja vascript по-прежнему приветствуется :)

Answer 1

использовать jquery просто так.

jQuery(document).ready(function($) { 
    var parent_width=$('.parent').width(); 
    var count=$('.item').length(); 
    var param=parent_width/count; 
    $('.item').width(param); 
});