Geek asks and answers

Floating divs with different heights get stuck while wrapping


Hello! Here is the problem: I have several (up to 5) divisions with different heights. Inside these elements are portlets that can grow in height. Here is a simplified example:

.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>
Run codeHide result

Here is a JSFiddle where you can see this.

When I reduce the width of my browser window, they divturn around, which is very good. The bad part is that it is 4444444444stuck on 2222222- it does not get to the top of the page:

1111111 2222222 333333
1111111 2222222 333333
        2222222 444444
                444444

The desired behavior is that when a hyphenation occurs, when it 4444444is placed at the beginning of the page on a completely different line:

1111111 2222222 333333
1111111 2222222 333333
        2222222
4444444
4444444
+5
source share
4 answers

display: inline-table. :

.clz{
    display:inline-table;
}

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

IE8

+8

div div clz :

<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

More articles:


All Articles