Galleria di immagini CSS Float BUG

Question

Questo è nuovo, sto riscontrando problemi con una pagina di archivio che ho creato. Sembra una galleria di immagini div fluttuanti abbastanza dirette ... ma per qualche ragione c'è un sacco di interruzioni di linea casuali tra i div. Ho pensato che potesse essere stato un problema con Cufon o IE.JS ecc., Ma ho disabilitato tutti i JS e ancora si verificano errori.

Sembra un po 'lungo pubblicare il codice qui, e ho lanciato un sacco di div inutili e correzioni chiare ma nulla sembra funzionare. Pubblicherò e organizzerò un rapporto adeguato dopo averlo capito.

Answer 1

Poiché alcuni titoli sono più lunghi di altri, alcune interruzioni di riga rendono il div più alto. I float quindi & Quot; si attaccheranno su & Quot; questi div più alti. Non è un bug di per sé, è solo il funzionamento del floating.

 --- --- ---
 |1| |2| |3|
 --- | | ---
     --- ---
         |4|
         ---
 ---
 |5|
 ---

Il modo migliore per evitare questo problema è dare ad ogni div un'altezza impostata.

In alternativa, puoi avere il primo div di ogni riga " clear: left " aggiungendo una classe appropriata a ciascuna div / first / seventh / etc.

EDIT: per elaborare come questo è fluttuato: Ogni div cerca di adattarsi alla stessa linea del div precedente, fluttuando il più a sinistra possibile. Se non c'è più spazio sulla linea, verrà prima spinta verso il basso, quindi a sinistra. Nell'esempio sopra, 4 verrà spinto in basso di 3, quindi galleggerà a sinistra il più lontano possibile, colpendo 2. 5 verrà spinto in basso di 4, quindi galleggerà a sinistra il più possibile.