Heim > Web-Frontend > CSS-Tutorial > Wie erreicht man mit reinem CSS Spalten gleicher Höhe?

Wie erreicht man mit reinem CSS Spalten gleicher Höhe?

Linda Hamilton
Freigeben: 2024-11-14 14:26:02
Original
204 Leute haben es durchsucht

How to Achieve Equal Height Columns with Pure CSS?

So erstellen Sie echte Spalten mit gleicher Höhe mit reinem CSS

Wenn Sie mit mehreren Spalten mit unterschiedlichen Inhaltslängen arbeiten, kann es häufig vorkommen, dass gleiche Höhen erreicht werden, ohne auf Hintergrundbilder zurückzugreifen Herausforderung. Nach umfangreicher Recherche haben wir eine einzigartige CSS-Lösung entwickelt, die dieses Problem effektiv angeht.

Lösung

Für einen vereinfachten Ansatz, der den vertikalen Raum effektiv verteilt, sollten Sie die Verwendung der folgenden Eigenschaften in Betracht ziehen:

.parent {
  display: table;
}

.child {
  display: table-cell;
}
Nach dem Login kopieren

Diese Methode weist dem übergeordneten Container und seinen untergeordneten Containern eine tabellenartige Struktur zu und stellt so sicher, dass sie den gleichen vertikalen Platz einnehmen.

Kompatibilität

Es ist wichtig zu beachten, dass diese Lösung ist nicht kompatibel mit Internet Explorer 7. Wenn die Unterstützung von IE7 entscheidend ist, ist möglicherweise ein komplexerer Ansatz erforderlich.

Beispiel

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2 with longer content</div>
  <div class="child">Column 3</div>
</div>
Nach dem Login kopieren

In diesem Beispiel haben alle drei Spalten das Gleiche Höhe, unabhängig von der Inhaltslänge jeder Spalte.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage