Wie kann ich mit schwebenden Elementen in CSS Spalten gleicher Höhe erstellen?

Spalten gleicher Höhe mit schwebenden Elementen erstellen

In einem Seitenlayout mit einem übergeordneten Div, das zwei untergeordnete Divs enthält, kann eines der untergeordneten Divs vorhanden sein haben mehr Inhalt, was dazu führt, dass die Höhe des übergeordneten Divs zunimmt. Allerdings passt das andere untergeordnete Div seine Höhe möglicherweise nicht entsprechend an. Dieses Problem kann durch Anwenden bestimmter CSS-Eigenschaften gelöst werden.

So erreichen Sie die gleiche Höhe für beide untergeordneten Divs:

1. Übergeordnetes Element:

   • Überlauf hinzufügen: versteckt, um zu verhindern, dass Inhalte außerhalb des übergeordneten Elements verschüttet werden.
   • Position festlegen: relativ für absolut Positionierung des folgenden untergeordneten Elements.
   • Verwenden Sie die Breite: 100 %, um sicherzustellen, dass das übergeordnete Element die gesamte verfügbare Breite überspannt.

2. .child-right-Element :

   • Weisen Sie eine eindeutige Farbe für die visuelle Analyse zu (z. B. Hintergrund: grün).
   • Stellen Sie die Höhe auf 100 % ein, um sicherzustellen, dass die Höhe mit der des übergeordneten Elements übereinstimmt.
   • Verwenden Sie die Breite: 50 %, um die Breite auf die Hälfte der Breite des übergeordneten Elements festzulegen.
   • Position hinzufügen: absolut für absolute Positionierung innerhalb des übergeordneten Elements.
   • Rechts festlegen: 0, um es bündig am rechten Rand des übergeordneten Elements zu positionieren übergeordnetes Element.
   • Setzen Sie top: 0 ein, um es bündig an der Oberkante des übergeordneten Elements zu positionieren.

Durch die Anwendung dieser CSS-Eigenschaften werden beide untergeordneten Divs verwendet gleiche Höhen sorgen für ein optisch ausgewogenes Layout.

Das obige ist der detaillierte Inhalt vonWie kann ich mit schwebenden Elementen in CSS Spalten gleicher Höhe erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!