Comment puis-je créer des colonnes de même hauteur à l'aide d'éléments flottants en CSS ?

Création de colonnes de même hauteur avec des éléments flottants

Dans une mise en page comportant un div parent contenant deux divs enfants, l'un des divs enfants peut avoir plus de contenu, ce qui entraîne une augmentation de la hauteur du div parent. Cependant, l'autre division enfant ne peut pas ajuster sa hauteur en conséquence. Ce problème peut être résolu en appliquant des propriétés CSS spécifiques.

Pour obtenir une hauteur égale pour les deux divs enfants :

1. Élément parent :

   • Ajouter un débordement : masqué pour empêcher tout contenu de se répandre en dehors du parent.
   • Définir la position : relative pour absolue positionnement de l'enfant suivant.
   • Utilisez la largeur : 100 % pour garantir que le parent s'étend sur toute la largeur disponible.

2. .child-right Element :

   • Attribuez une couleur unique pour l'analyse visuelle (par exemple, l'arrière-plan : vert).
   • Définissez la hauteur : 100 % pour vous assurer que la hauteur correspond à celle du parent.
   • Utilisez la largeur : 50 % pour définir la largeur sur la moitié de la largeur du parent.
   • Ajoutez position : absolue pour un positionnement absolu au sein du parent.
   • Définissez à droite : 0 pour le positionner au ras du bord droit du parent.
   • Définissez top : 0 pour le positionner au ras du bord supérieur du parent.

En appliquant ces propriétés CSS, les deux divs enfants auront hauteurs égales, assurant un aménagement visuellement équilibré.

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!