div diverse altezze galleggiare in due colonne

Ho due colonne e voglio impilare div di diverse altezze in ordine di apparenza.div diverse altezze galleggiare in due colonne

I div sono creati dinamicamente.

Se li faccio fluttuare solo per il 50% della larghezza, presto arrivo che il div # 4 è 5 volte più alto di alcuni div in entrata. Quindi il div successivo è allineato in alto con il fondo del precedente div.

ho bisogno per adattarsi div bambino in un contenitore per essere corrispondenza esatta come questo:

----- ------- 
    1  2 
----- 
    3 ------- 
----- 4 
    5 
----- 
    6 
----- 
    7 ------- 
----- 8 
    9 

----- 
10 ------- 
     11 
     ------- 
     ------- 
-----

Ecco frammento di codice quello che ho fatto:

<style> 
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;} 
    .left {float:left;} 
    .right {float:right;} 
    .container {width:205px;} 
</style> 
    <body> 
     <div class="container"> 
      <div class="box left" style="height:60px;">1</div> 
      <div class="box left" style="height:80px;">2</div> 
      <div class="box left" style="height:30px;">3</div> 
      <div class="box left" style="height:70px;">4</div> 
      <div class="box left" style="height:60px;">5</div> 
      <div class="box left" style="height:20px;">6</div> 
      <div class="box left" style="height:40px;">7</div> 
      <div class="box left" style="height:90px;">8</div> 
      <div class="box left" style="height:30px;">9</div> 
     </div> 
    </body>

e sembra simile a questo

http://dl.dropbox.com/u/142343/divstack.html

apprezzare l'aiuto

fonte

2012-07-10 dzona

Puoi pubblicare il tuo html e css attuali? – Erica

[Cosa hai provato?] (Http://mattgemmell.com/2008/12/08/what-have-tried/) – avall

Vedo cosa stai cercando di fare .. qual è il problema? – Oofpez

Dovrai farlo con JavaScript. Se stai usando jQuery, c'è un ottimo plugin chiamato Masonry. C'è anche lo non jQuery version.

Per citare il README on GitHub:

Massoneria è uno script layout a griglia dinamica. Pensa a questo come il rovescio di float CSS. Mentre il galleggiamento dispone gli elementi orizzontalmente quindi verticalmente, la massoneria dispone gli elementi verticalmente, posizionante ogni elemento nel punto aperto seguente nella griglia. Il risultato riduce al minimo lo spazio verticale tra gli elementi di altezza variabile, pari a , proprio come una pietra muraria in un muro.

Il single column layout è probabilmente quello che stai cercando.

Se non ti dispiace lasciando browser più vecchi nella polvere, ci sono il CSS3 column properties. C'è un esempio here, on Quirksmode e alcuni documenti su MDN.

fonte

2012-07-10 13:51:05 Bojangles

+1 Il plugin Masonry è la soluzione ideale per questo layout. –

Ma la muratura non funziona in IE ... qualsiasi soluzione –

@Rama Hai mai provato in IE? [Il sito demo] (http://masonry.desandro.com/) funziona perfettamente in IE10, 8 e 7. – Bojangles

Usa 2 div come contenitore, metti entrambe le colonne in questo contenitore div, quindi dai questo galleggiante a sinistra e a destra .... potrebbe funzionare ... Anche il layout della griglia funzionerà.

fonte

2012-07-10 15:04:44

div diverse altezze galleggiare in due colonne

risposta

Problemi correlati