CSS Image Gallery Float BUG

Question

Esta es nueva, estoy teniendo problemas con una página de archivo que he creado. Parece una galería de imágenes div flotadas bastante directa ... pero por alguna razón hay un montón de saltos de línea aleatoriamente a través de los divs. Pensé que podría haber sido un problema con Cufon o IE.JS, etc., pero desactivé todos los JS y todavía funciona.

Parece un poco largo publicar el código aquí, y he arrojado un montón de divs innecesarios y soluciones claras, pero nada parece funcionar. Publicaré y organizaré un informe adecuado después de que lo haya resuelto.

Answer 1

Dado que algunos títulos son más largos que otros, algunos saltos de línea hacen que el div sea más alto. Las carrozas entonces & "; Colgarán de &"; estos divs más altos. No es un error per se, es simplemente cómo funciona la flotación.

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

La mejor manera de evitar este problema es darle a cada div una altura establecida.

Alternativamente, puede tener el primer div de cada línea " clear: left " agregando una clase apropiada a cada primer / cuarto / séptimo / etc div.

EDITAR: Para elaborar cómo se flota esto: Cada div intenta encajar en la misma línea que el div anterior, flotando lo más a la izquierda posible. Si no queda espacio en la línea, primero se empujará hacia abajo y luego a la izquierda. En el ejemplo anterior, 4 será empujado hacia abajo por 3, luego flotará hacia la izquierda tanto como sea posible, golpeando 2. 5 será empujado hacia abajo por 4, luego flotará hacia la izquierda tanto como sea posible.