Comment puis-je empêcher la distorsion de la mise en page causée par les éléments flottants à hauteur variable ?

Distorsion de la mise en page avec des éléments flottants à hauteur variable

Lorsque vous travaillez avec des éléments à hauteur variable dans une mise en page flottante, il n'est pas rare de rencontrer des situations où des personnes plus grandes Les éléments poussent les frères et sœurs suivants vers le bas, brisant la structure de grille prévue.

Considérons l'exemple suivant : six éléments de figure sont conçus pour former deux rangées de trois. Cependant, en raison des hauteurs variables des éléments, le quatrième élément de la figure s'étend au-delà de la première ligne, provoquant le décalage des cinquième et sixième éléments.

Le CSS utilisé pour cet exemple est simple :

figure { width: 30%; float: left; margin-left: 1%; font-size: small; outline: solid #999 1px; }
img { max-width: 100%; }

Pour remédier à la distorsion de la mise en page, nous pouvons introduire une règle CSS qui cible spécifiquement le premier élément de chaque ligne. En effaçant le flotteur gauche, nous nous assurons que les frères et sœurs suivants sont alignés horizontalement en dessous d'eux.

figure:nth-of-type(3n+1) {
    clear:left;
}

Cette règle résout le problème d'alignement en forçant le quatrième élément de la figure à commencer une nouvelle ligne. Les cinquième et sixième éléments sont ensuite positionnés correctement sous les trois premiers.

L'exemple de disposition mis à jour est désormais comme prévu, chaque rangée étant composée de trois éléments de figure uniformément espacés, quelles que soient leurs différences de hauteur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!