I div flottanti con altezze diverse sono bloccati mentre si avvolge

Question

Ciao! Ecco un problema: ho diversi (fino a 5) div con diverse altezze. Dentro quelle div sono portlet, che possono crescere in altezza. Ecco un esempio semplificato:
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>​ 

Ecco CSS per esso:

.clz{ 
    float: left; 
}​ 

Ecco jsfiddle, dove si può vedere: http://jsfiddle.net/eGawU/9/
Quando ho diminuisco la mia finestra del browser larghezza, le div sono avvolte, il che è molto buono. La parte negativa è che 4.444.444,444 mila è bloccato a 2.222.222 - non cade per l'inizio della pagina:

1111111 2222222 333333 
1111111 2222222 333333 
     2222222 444444 
       444444 

comportamento desiderabile è che quando si verifica involucro 4444444 è posto all'inizio della pagina in linea completamente diversa :

1111111 2222222 333333 
1111111 2222222 333333 
     2222222 
4444444 
4444444 

Grazie per l'attenzione.

Answer 1

È possibile utilizzare la visualizzazione : tabella in linea per questo. Scrivi come questo:

.clz{ 
    display:inline-table; 
} 

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

E 'fino a IE8 & sopra

Answer 2

Rimuovere il galleggiante. demo http://jsfiddle.net/eGawU/17/

Answer 3

È possibile provare avvolgendo i primi tre div in un altro clz div come questo:

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

Questo renderà div 4 fanno esattamente ciò che si vuole, ma si può avere a nido più div se si aggiunge più colonne.

Answer 4

uso Chiaro proprietà di css

provare questo http://jsfiddle.net/gajjuthechamp/eGawU/18/

o

è possibile aggiungere un div in più in seguito si vuole rompere

provare questo http://jsfiddle.net/gajjuthechamp/eGawU/19/