Pływające elementy div o różnej wysokości są zablokowane podczas owijania

Question

Hello! Oto problem: mam kilka (do 5) elementów div o różnych wysokościach. Wewnątrz tych div są portlety, które mogą rosnąć na wysokość. Oto uproszczony przykład:
HTML:

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

Oto CSS dla niego:

.clz{ 
    float: left; 
}​ 

Oto jsfiddle, gdzie można je zobaczyć: http://jsfiddle.net/eGawU/9/
Kiedy zmniejszyć okno przeglądarce szerokość, divy są zawijane, co jest bardzo dobre. Złe jest to, że 4444444444 tkwi w 2222222 - nie spadają na początku strony:

1111111 2222222 333333 
1111111 2222222 333333 
     2222222 444444 
       444444 

pożądane zachowanie jest, że gdy pojawia się okład 4444444 umieszcza się na początku strony w zupełnie innej linii :

1111111 2222222 333333 
1111111 2222222 333333 
     2222222 
4444444 
4444444 

Dzięki za uwagę.

Answer 1

Możesz użyć do tego celu wyświetlania : tabeli w tabeli. Napisz tak:

.clz{ 
    display:inline-table; 
} 

Sprawdź to http://jsfiddle.net/eGawU/13/

To aż IE8 & powyżej

Answer 2

Usuń pływaka. demo http://jsfiddle.net/eGawU/17/

Answer 3

Można spróbować owijania pierwsze trzy DIV w innym clz div tak:

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

uczyni div 4 wiem dokładnie, co chcesz, ale być może trzeba będzie gniazdo więcej DIV jeśli dodać więcej kolumn.

Answer 4

użycie Wyczyść własności CSS

spróbować http://jsfiddle.net/gajjuthechamp/eGawU/18/

lub

można dodać dodatkowy div w poniżej chcesz przerwać

spróbować tej http://jsfiddle.net/gajjuthechamp/eGawU/19/