Comment puis-je réparer les mises en page brisées par des éléments flottants de différentes hauteurs ?

Éléments flottants avec disposition de rupture à hauteurs variables

Lorsque vous travaillez avec des éléments flottants de hauteurs variables, maintenir une disposition propre peut être un défi. Un de ces scénarios est celui où certains éléments sont plus grands que d'autres, ce qui entraîne le désalignement des frères et sœurs suivants.

Pour résoudre ce problème, CSS propose une solution intelligente :

Règle CSS pour Alignement des éléments flottants

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

Cette règle demande au navigateur de effacer les éléments flottants tous les trois éléments, en commençant par le premier. En d'autres termes :

• Après les premier, quatrième et septième éléments, le flotteur est effacé, permettant aux frères et sœurs suivants de démarrer une nouvelle lignée.
• Cela garantit que la deuxième rangée de les éléments s'alignent directement en dessous des trois premiers, quel que soit leur hauteurs.

Exemple

Considérez le HTML et le CSS fournis :

<figure> // Figure 1
    ...
</figure>
<figure> // Figure 2
    ...
</figure>
<figure> // Figure 3
    ...
</figure>
<figure> // Figure 4
    ...
</figure>
<figure> // Figure 5
    ...
</figure>
<figure> // Figure 6
    ...
</figure>

figure {
    width: 30%;
    float: left;
    ...
}

En ajoutant la règle clear: left :

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

La disposition est corrigée, et la deuxième rangée de chiffres s'aligne en dessous de la première trois :

[Image : mise en page corrigée avec une deuxième rangée de chiffres alignés en dessous des trois premiers]

Conclusion

L'utilisation de la règle claire : gauche fournit une façon élégante et efficace de garantir que les éléments flottants de différentes hauteurs s'alignent correctement, en conservant une disposition propre et organisée.

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!