Как расположить блоки переменной ширины и высоты, плавающие влево по одной в каждой строке?

Question

У меня есть много ящиков (дисплей: inline-block + float: left) с различной шириной и высотой, как это:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

И я не знаю, как это сделать, когда коробкадолжны быть обернуты, он будет выровнен в следующей «строке» следующим образом:

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD
EE

Не так, как естественное плавание: left:

AA BB CC DDD EE FF GG
   BB    DDD    FF EE
         DDD

Реальный пример ( текущее состояние):

Ожидаемый результат которого я хочу достичь:

jsFiddle demo: здесь

Answer 1

В вашей демоверсии у вас есть и float: left, и display: inline-block. float: left заставляет display: block, поэтому display: inline-block ничего не делал.

Вы можете достичь желаемого результата с display: inline-block; vertical-align: top.

См .: http://jsfiddle.net/tdSnH/1/

Answer 2

<style>
    #container{
       min-width:100px;
       max-width:1024px;/*see your boxes' container width*/
    }
   #container .item{
      float:left;
      min-width:10px;/*some value*/
      max-width:256px; /* #container with / item.length */
    }
</style>
<div id="container">
    <div class="item">a</div>
    <div class="item">bbbbb</div>
    <div class="item">ccc</div>
    <div class="item">d</div>
</div>