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

问题描述 投票:5回答:4

你好!这是一个问题:我有几个(最多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
4个回答
8
投票

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

.clz{
    display:inline-table;
}

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

直到IE8及以上版本


0
投票

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


0
投票

您可以尝试将前三个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。


0
投票

使用css的Clear属性

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

要么

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

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

© www.soinside.com 2019 - 2024. All rights reserved.