CSS float spazi vuoti

Question

Ho più div in un involucro, hanno un'altezza diversa. Mi piacerebbe galleggiare a sinistra. 2 Div possono stare in fila. Ma dal momento che ognuno dei div ha un'altezza diversa, c'è ancora abbastanza spazio dispari nella riga successiva. Posso rimuovere lo spazio e spostare i div in alto?

Si prega di guardare l'immagine:

Ecco il codice:

<div class="wrap"> 
    <div class="box1">Box1 with less height.</div> 
    <div class="box2">Box2 with more height.</div> 
    <div class="box3">Box3 with whatever height.</div> 
</div> 

CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 
} 

.box1{ 
    width:200px; 
    height:50px; 
    float:left; 
    border:1px solid green; 
} 

.box2{ 
    width:200px; 
    height:150px; 
    float:left; 
    border:1px solid blue; 
} 

.box3{ 
    width:200px; 
    height:250px; 
    float:left; 
    border:1px solid blue; 
} 

JSFiddle: http://jsfiddle.net/NsH5M/

PS. Le altezze div non sono fisse. Questo è solo per esempio. Modifica: Siamo spiacenti, avrei dovuto dire che non è possibile modificare il markup.

Answer 1

Provare a usare masonry. Questo dovrebbe aiutarti a organizzare il tuo div senza spazio vuoto.

Ecco come viene utilizzato come un esempio di codice: jsfiddle

HTML:

<div class="wrap"> 
    <div class="box box1">Box1 with less height.</div> 
    <div class="box box2">Box2 with more height.</div> 
    <div class="box box3">Box3 with whatever height.</div> 
</div> 

JavaScript:

$(function(){ 
    $('.wrap').masonry({ 
     // options 
    itemSelector : '.box' 
    }); 
});​ 
​ 

e CSS:

.wrap{ 
    width:410px; 
    border:1px solid red; 
    overflow:hidden; 

} 

.box{ 
    float: left; 
    width: 200px; 
} 

.box1{ 
    height:50px; 
    border:1px solid green; 
} 

.box2{ 
    height:150px; 
    border:1px solid blue; 
} 

.box3{ 
    height:250px; 
    border:1px solid blue; 
} 

Answer 2

non sono sicuro se avrebbe funzionato, ma si può provare riquadri 1 e 3 galleggianti a sinistra e scatola 2 a destra

EDIT: lavora in firefox http://jsfiddle.net/NsH5M/1/

Answer 3

Dare float:right-.box2 scrittura in questo modo:

.box2{ 
    width:200px; 
    height:150px; 
    float:right; 
    border:1px solid blue; 
} 

Controllare questo http://jsfiddle.net/NsH5M/2/

Answer 4

se è possibile modificare il markup, si può avvolgere box1 e box3 in un contenitore che viene fatto galleggiare:

http://jsfiddle.net/NsH5M/3/

è anche possibile float: right tua box3 ma che sarà un po 'cambiare il risultato (ci sarà uno spazio tra le caselle flottate a sinistra e quella a destra - il che potrebbe non essere un problema a seconda del progetto.

Answer 5

Basta usare float: giusto per gli elementi che desideri sulla destra. In questo caso:

.box2{ 
width:200px; 
height:150px; 
float:right; 
border:1px solid blue; 
} 

tuo jsfiddle aggiornato here

Answer 6

Isotope può farlo per te, usando il layout della muratura.

Answer 7

Soluzione corretta ... La domanda chiave è "hai solo 2 colonne?". E dal momento che qui è il caso, la soluzione corretta sarebbe questo:

(si tratta di un codice jQuery ma ovviamente si può fare se qualche parola in puro JS)

E 'il mio caso di classe "add info "è stato assegnato a tutti gli elementi nel contenitore. Quello che stai facendo è semplicemente controllare se l'elemento successivo deve essere flottato a sinistra oa destra. Non usare script complessi per tutto. La metà delle persone accede al web dal cellulare e la quantità di dati mobili è limitata.

function contactFloats() { 
    var leftCounter = 0; 
    var rightCounter = 0; 
    $('.add-info').each(function(){ 
      if(leftCounter <= rightCounter){ 
       $(this).css('float', 'left'); 
       leftCounter += $(this).outerHeight(); 
      }else{ 
       $(this).css('float', 'right'); 
       rightCounter += $(this).outerHeight(); 
      } 
    }); 
}