Wie kann man die Div-Höhe schwebender Kinder an die Größe ihrer Eltern anpassen?

Ausbalancieren der schwebenden untergeordneten Div-Höhen mit der übergeordneten Körpergröße

Problemstellung:

In a Seite mit folgender HTML-Struktur:

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

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

Als Inhalt des Child-Left-Div erweitert wird, erhöht sich die Höhe des übergeordneten Divs zu Recht. Die Höhe des Child-Right-Divs bleibt jedoch unverändert, was die Frage aufwirft: Wie kann die Höhe des Child-Right an die seines Elternteils angeglichen werden?

Lösung:

Um die Höhe des untergeordneten rechten Divs an die Höhe seines übergeordneten Elements anzupassen, wenden Sie die folgenden CSS-Eigenschaften auf das übergeordnete Element an Element:

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

Diese Eigenschaften stellen sicher, dass das übergeordnete Element eine definierte Höhe hat und die schwebenden untergeordneten Elemente enthält. Fügen Sie als Nächstes die folgenden CSS-Eigenschaften zur .child-right-Klasse hinzu:

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

Diese Eigenschaften geben dem Child-Right-Div eine absolute Position, indem sie seine Höhe auf 100 % festlegen und es am rechten Rand von platzieren das übergeordnete Element.

Ausführlichere Beispiele und Informationen zum Erstellen von Spalten gleicher Höhe finden Sie unter den bereitgestellten Links im Referenzabschnitt unten.

Referenzen:

• [CSS-Beispiele für Spalten gleicher Höhe] (Link zu externer Ressource)
• [Informationen zu gleicher Höhe Spalten](Link zur externen Ressource)

Das obige ist der detaillierte Inhalt vonWie kann man die Div-Höhe schwebender Kinder an die Größe ihrer Eltern anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!