如何将左侧浮动的可变宽度和高度框定位为每行一个垂直方向？

Question

我有很多盒子（显示：内联块+浮动：左），宽度和高度各种各样：

AA BB CC DDD EE FF GG
   BB    DDD    FF
         DDD

而且我不知道该怎么做，当盒子必须被包裹时，它将在下一个“线”中对齐，如下所示：

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

不像天然浮动：左：

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

真实示例（当前状态）：

期望的结果我希望实现：

jsFiddle演示： here

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>