Comment aligner verticalement des éléments flottants de hauteurs inconnues ?

Aligner verticalement des éléments flottants de hauteurs inconnues

Lorsque vous essayez d'aligner verticalement des éléments flottants de hauteurs inconnues au sein d'une division extérieure centrée, vous pourriez rencontrer difficultés dues à l’alignement naturel des flotteurs. Cependant, il existe une approche alternative pour obtenir un alignement vertical à l'aide d'éléments de niveau en ligne et de la propriété vertical-align.

Méthode d'alignement vertical :

Pour aligner verticalement des éléments flottants au sein d'une division externe, suivez ces étapes :

1. Créez des wrappers de niveau en ligne : Enveloppez chaque flotteur dans un élément de niveau en ligne distinct, tel qu'un avec l'affichage : inline- propriété de bloc. Cela établit un nouveau contexte de formatage de bloc (BFC) pour chaque flottant.
2. Positionner les wrappers en ligne : Les wrappers de niveau en ligne seront positionnés en ligne les uns à côté des autres en raison de leur nature en ligne. .
3. Aligner les wrappers verticalement : Utilisez la propriété vertical-align sur les wrappers de niveau en ligne pour les aligner verticalement dans la division externe.

Problèmes potentiels :

Notez qu'il peut y avoir un espace résiduel entre les wrappers de niveau en ligne. Pour résoudre ce problème, reportez-vous à des ressources supplémentaires sur la suppression de l'espace entre les éléments de bloc en ligne, telles que celle mentionnée dans la réponse fournie.

Conclusion :

En tirant parti de display : propriété inline-block et propriété vertical-align, on peut efficacement aligner verticalement des éléments flottants de hauteurs inconnues au sein d'une division externe.

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!