Comment puis-je faire en sorte que deux DIV enfants flottants aient des hauteurs égales ?

Égalisation des hauteurs des DIV enfants flottants

Problème :

Dans une mise en page avec un DIV parent contenant deux DIV enfants flottants, seul le premier DIV enfant étend sa hauteur pour correspondre à la hauteur du parent lorsque le contenu augmente en son sein. Le deuxième DIV enfant reste à sa hauteur par défaut, laissant une apparence inégale.

Solution :

Pour garantir que le deuxième DIV enfant (.child-right) s'étende jusqu'au même hauteur que son parent, appliquez le CSS suivant au parent .parent et à l'enfant .child-right elements :

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Explication :

• Définition du débordement : masqué sur l'élément parent empêche le contenu des DIV enfants de dépasser les limites du parent.
• Le positionnement relatif de l'élément parent permet au DIV enfant d'utiliser un positionnement absolu au sein de son frame.
• Définir la largeur : 100 % sur l'élément parent garantit qu'il occupe toute la largeur de son conteneur.
• Pour le DIV enfant, définir la hauteur : 100 % le fait s'étendre jusqu'à la hauteur de son parent.
• largeur : 50 % garantit qu'il occupe la moitié de la largeur du parent.
• Absolu le positionnement en utilisant right: 0 et top: 0 place le DIV enfant dans le coin supérieur droit du parent, aligné avec le bord droit.

En utilisant cette combinaison de propriétés CSS, les DIV enfants flottants s'agrandira pour correspondre à la hauteur de leur DIV parent, ce qui entraînera une répartition égale de la hauteur entre les deux enfants.

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!