Comment faire en sorte que les hauteurs des divisions flottantes des enfants correspondent à la taille de leurs parents ?

Équilibrer les hauteurs flottantes des enfants pour correspondre à la hauteur des parents

Énoncé du problème :

Dans un page avec la structure HTML suivante :

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Comme le contenu du div enfant-gauche se développe, la hauteur du div parent augmente à juste titre. Cependant, la hauteur du div droit de l'enfant reste inchangée, ce qui pose la question : comment égaliser la hauteur du droit de l'enfant à celle de son parent ?

Solution :

Pour que la hauteur du div de droite enfant corresponde à la hauteur de son parent, appliquez les propriétés CSS suivantes à l'élément parent :

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

Ces propriétés assurez-vous que l'élément parent a une hauteur définie et contient les enfants flottants. Ensuite, ajoutez les propriétés CSS suivantes à la classe .child-right :

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

Ces propriétés donnent au div droit de l'enfant une position absolue, en définissant sa hauteur à 100 % et en le plaçant contre le bord droit de le parent.

Pour des exemples plus détaillés et des informations sur la création de colonnes de même hauteur, reportez-vous aux liens fournis dans la section de référence ci-dessous.

Références :

• [Exemples CSS pour les colonnes de hauteur égale](lien vers une ressource externe)
• [Informations sur la hauteur égale Colonnes](lien vers une ressource 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!