Galerie d'images CSS Float BUG

Question

C’est une nouvelle, j’ai un problème avec une page d’archive que j’ai faite. Cela ressemble à une galerie d’images div assez flottante ... mais pour une raison quelconque, il y a un tas de coupures de lignes au hasard dans les div. Je pensais que c’était peut-être un problème avec Cufon ou IE.JS, etc., mais j’ai désactivé tous les JS et cela bogue quand même.

Cela semble un peu long pour poster le code ici, et j’ai jeté un tas de divs inutiles et des corrections claires mais rien ne semble fonctionner. Je posterai et organiserai un rapport approprié une fois que je l'aurai compris.

Answer 1

Étant donné que certains titres sont plus longs que d’autres, certains séparent les lignes et rendent ainsi la div plus grande. Les flotteurs seront alors & "Accrochés à &"; ces grands divs. Ce n’est pas un bug en soi, c’est juste comment ça marche.

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

Le meilleur moyen d'éviter ce problème est de donner à chaque div une hauteur définie.

Vous pouvez également avoir la première division de chaque ligne & "clear: left &"; en ajoutant une classe appropriée à chaque première / quatrième / septième / div / etc div.

EDIT: Pour expliquer comment cela est flotté: Chaque div essaye de tenir sur la même ligne que la précédente, flottant aussi loin que possible. S'il n'y a plus de place sur la ligne, elle sera d'abord poussée vers le bas, puis à gauche. Dans l'exemple ci-dessus, 4 sera abaissé de 3, puis il flottera à gauche aussi loin que possible en atteignant 2. 5 sera abaissé de 4, puis à gauche aussi loin que possible.