html - 不同高度的 float div 在包装时卡住

Question

你好!这是一个问题:我有几个(最多 5 个)高度不同的 div。这些 div 内部是 portlet，它们的高度可以增加。这是一个简化的示例:

.clz {
  float: left;
}

<div class="container">
  <div class="clz">1111111111<br/>1111111111</div>
  <div class="clz">2222222222<br/>2222222222<br/>2222222222</div>
  <div class="clz">3333333333<br/>3333333333</div>
  <div class="clz">4444444444<br/>4444444444</div>
</div>

Here是一个 JSFiddle，您可以在其中看到它。

当我减小浏览器窗口宽度时，div 被换行，这非常好。不好的部分是 4444444444 停留在 2222222 - 它不会落到页面的开头:

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

理想的行为是当 4444444 被放置在页面的开头完全不同的行时发生换行:

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444

Answer 1

您可以为此使用display:inline-table。像这样写:

.clz{
    display:inline-table;
}

检查这个http://jsfiddle.net/eGawU/13/

IE8及以上版本