不同高度的浮动div在包装时被卡住答案

【问题标题】：Floating divs with different heights are stucked while wrapping不同高度的浮动div在包装时被卡住
【发布时间】：2012-08-24 01:00:00
【问题描述】：

你好！这是一个问题：我有几个（最多 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，你可以在其中看到它。

当我减小浏览器窗口宽度时，divs 会被包裹，这非常好。不好的部分是4444444444 卡在2222222 - 它不会落到页面的开头：

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

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

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444

【问题讨论】：

标签： html css height

【解决方案1】：

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

.clz{
    display:inline-table;
}

查看http://jsfiddle.net/eGawU/13/

IE8 及以上版本

【讨论】：

超级！非常感谢！再加上vertical-align: top;，一切都如我所愿。
根据您正在寻找的行为和所需的浏览器支持，这可能是最好的解决方案。
这是完美的解决方案。 5 年后仍然为我工作

【解决方案2】：

删除浮动。演示http://jsfiddle.net/eGawU/17/

【讨论】：

该演示与简单地删除浮动无关？从他的原始代码中删除浮动只会给你 100% 宽度的块元素。

【解决方案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。

【讨论】：

不是我问题的真正答案，但是，我的客人，我可能会被这样误解。 4444444 或 333333 - 对我来说没关系。问题是关于从不同高度包装没有问题，而不是包装 4444444。

【解决方案4】：

使用清除 css的属性

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

或

你可以在下面添加一个额外的 div 来打破

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

【讨论】：

不是我的问题的答案 - 我想要根据窗口大小换行。