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＆amp;上述

Answer 2

移除浮子。演示http://jsfiddle.net/eGawU/17/

Answer 3

您可以尝试将前三个div包装在另一个clz div中，如下所示：

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

这将使div 4完全符合您的要求，但如果添加更多列，则可能需要嵌套更多div。

Answer 4

使用清除 css属性

试试这个http://jsfiddle.net/gajjuthechamp/eGawU/18/

或

你可以在下面添加一个想要破解的额外div

试试这个http://jsfiddle.net/gajjuthechamp/eGawU/19/

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

4 个答案: