6


你好！这是一个问题：我有几个（最多 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>

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

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

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

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

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444
4

4 回答 4

9

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

.clz{
    display:inline-table;
}

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

直到IE8及以上

于 2012-08-29T12:13:29.457 回答
0

Remove the float. demo http://jsfiddle.net/eGawU/17/

于 2012-08-29T12:17:48.887 回答
0

You can try wrapping the first three divs in another clz div like this:

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

This will make div 4 do exactly what you want, but you may have to nest more divs if you add more columns.

于 2012-08-29T12:18:00.430 回答
0

use Clear Property of css

try this http://jsfiddle.net/gajjuthechamp/eGawU/18/

or

you can add a extra div in below you want to break

try this http://jsfiddle.net/gajjuthechamp/eGawU/19/

于 2012-08-29T12:18:22.980 回答