包装时,不同高度的浮动div会被卡住

Question

你好!这是一个问题:我有几个(最多5个)不同高度的div.在这些div中是portlet,它们可以在高度上增长.这是一个简化的例子:
HTML:

.clz {
  float: left;
}

这是它的CSS:

<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>

这里是jsfiddle,你可以看到它:http ://jsfiddle.net/eGawU/9/
当我减少我的浏览器窗口宽度时,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及以上版本