CSS Galeria de Imagens BUG Float

Question

Este é novo, estou tendo problema com uma página de arquivo eu fiz. Parece uma galeria de imagens div bastante para a frente flutuou ... mas por algum motivo o há um monte de quebras de linha aleatoriamente ao longo dos divs. Eu pensei que pode ter sido um problema com Cufon ou IE.JS etc, mas eu desativei todos os JS e ainda erros para fora.

Parece um pouco longo para postar o código aqui, e eu joguei um monte de divs desnecessários e correções claras, mas nada parece estar funcionando. Vou postar e organizar um relatório adequada depois que eu descobri-lo.

Answer 1

Uma vez que alguns títulos são mais do que outros, alguns linha-break e, assim, tornar o mais alto div. Os flutuadores, então, "agarrar" estas divs mais altos. Não é um bug, por si só, é apenas como funciona flutuante.

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

A melhor maneira de evitar este problema é dar a cada div uma altura set.

Como alternativa, você pode ter o primeiro div de cada linha "clear: left". Adicionando uma classe apropriada a cada primeiro / para trás / sétima / etc div

EDIT: Para elaborar como isso é lançada: Cada div tenta caber na mesma linha que o div anterior, flutuante, tanto à esquerda como pode. Se não houver espaço deixado na linha, ele vai primeiro ser empurrado para baixo, depois à esquerda. No exemplo acima, 4 será empurrado para baixo por 3, então ele vai flutuar esquerda, tanto quanto ele pode, bater 2. 5 está sendo empurrado para baixo por 4, em seguida, vai para a esquerda, tanto quanto possível.