Comment réparer la distorsion de la mise en page causée par les éléments flottants à hauteur variable ?

Éléments flottants avec des hauteurs variables déformant la disposition : une solution complète

Lorsque des éléments flottants de hauteurs variables, il est courant de rencontrer des problèmes de disposition là où ils sont plus hauts Certains éléments empêchent les frères et sœurs suivants de s'aligner correctement. Cela peut conduire à une apparence indésirable, comme dans l'exemple fourni où une rangée d'éléments flottants se brise en raison d'un élément allongé.

Pour résoudre ce problème, nous pouvons utiliser CSS pour garantir un alignement correct. En ajoutant la règle suivante :

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

nous précisons qu'un élément de figure sur trois doit "effacer" son côté gauche. Cela met effectivement fin à la séquence flottante et force les éléments suivants à s'aligner sous les trois premiers.

Cette solution est à la fois efficace et visuellement attrayante, conservant la mise en page prévue sans avoir besoin d'outils externes tels que JavaScript ou jQuery.

Démonstration en direct

Référez-vous à l'exemple jsFiddle révisé pour assister à l'alignement transparent de tous les éléments de la figure, quel que soit leurs différentes hauteurs : http://jsfiddle.net/KatieK/5Upbt/

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!