Comment puis-je réparer les colonnes mal alignées causées par des éléments flottants de hauteurs variables ?

Les éléments flottants de hauteur variable perturbent l'alignement des colonnes

Lorsque vous travaillez avec du contenu à hauteur variable dans une mise en page à plusieurs colonnes, il est courant pour rencontrer des problèmes où des éléments plus grands empêchent leurs frères et sœurs de s'aligner correctement. Cela peut se produire lors de l'utilisation de flotteurs pour positionner les éléments, car l'élément le plus haut forcera les éléments suivants à flotter en dessous, brisant la structure de colonne souhaitée.

Pour résoudre ce problème, CSS peut être utilisé pour créer une ligne- alignement par ligne pour les éléments. En ajoutant la règle suivante, la mise en page peut être corrigée sans recourir à JavaScript ou jQuery :

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

Dans cette règle, nth-of-type(3n 1) cible le premier élément de chaque ligne de trois éléments . L'application de clear:left à cet élément réinitialise efficacement le contexte flottant, permettant aux éléments suivants de s'aligner correctement en dessous.

Cette simple modification CSS garantit que les éléments de la deuxième ligne s'alignent sous la première ligne, créant ainsi le structure de colonne souhaitée, quelles que soient les différentes hauteurs de contenu au sein des éléments.

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!