Wie erstelle ich mit reinem CSS Spalten gleicher Höhe?

Spalten gleicher Höhe mit CSS erstellen

Spalten gleicher Höhe sind für die Erstellung optisch ansprechender Layouts unerlässlich. Zwar gibt es verschiedene Ansätze, eine effiziente Methode ist jedoch die Verwendung von reinem CSS. Dieses Tutorial entmystifiziert die Technik und widerlegt die Vorstellung, dass es sich lediglich um eine Duplizierung anderer Lösungen handelt.

Die Herausforderung

Wie können wir Spalten erstellen, die:

• Füllen Sie den gesamten vertikalen Raum des übergeordneten Div aus
• Stellen Sie gleiche Höhen zur Verfügung, ohne auf Hintergrundbilder angewiesen zu sein

Basierend auf umfangreichen Recherchen haben wir eine einzigartige Lösung entdeckt.

Die Antwort

Für einen unkomplizierten Ansatz nutzen Sie den folgenden CSS-Trick:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

Dieser Trick nutzt tabellenbasierte Anzeigeeigenschaften. Wenn das übergeordnete Div eine Tabellenanzeige annimmt, werden seine untergeordneten Divs zu Tabellenzellen und erben die gleiche Höhe.

Beispiel

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2</div>
  <div class="child">Column 3</div>
</div>

Hinweis: IE7 funktioniert mit diesem Ansatz nicht gut, sodass eine komplexere Lösung für die Abwärtskompatibilität erforderlich ist.

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