Gewusst wie: Gleiche Höhe
Erfahren Sie, wie Sie mit CSS gleich hohe Spalten erstellen.
So erstellen Sie Säulen mit gleicher Höhe
Wenn Sie Spalten haben, die nebeneinander angezeigt werden sollen, möchten Sie oft, dass sie die gleiche Höhe haben (entsprechend der Höhe der höchsten).
Das Problem:
Das Verlangen:
Schritt 1) HTML hinzufügen:
Beispiel
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Responsive Equal Height
Die Spalten, die wir im vorherigen Beispiel erstellt haben, sind responsiv (wenn Sie die Größe des Browserfensters im try it-Beispiel ändern, werden Sie sehen, dass sie sich automatisch an die erforderliche Breite und Höhe anpassen). Bei kleinen Bildschirmen (wie Smartphones) möchten Sie jedoch möglicherweise, dass sie vertikal statt horizontal gestapelt werden:
Auf mittleren und großen Bildschirmen:
Hallo Welt.
Hallo Welt.
Hallo Welt.
Hallo Welt.
Hallo Welt.
Auf kleinen Bildschirmen:
Hallo Welt.
Hallo Welt.
Hallo Welt.
Hallo Welt.
Hallo Welt.
Um dies zu erreichen, fügen Sie eine Medienabfrage hinzu und geben Sie einen Breakpoint-Pixelwert an, wann dies geschehen soll:
Beispiel
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Gleiche Höhe und Breite mit Flexbox
Sie können Flexbox auch verwenden, um gleich hohe Boxen zu erstellen:
Beispiel
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Hinweis: Flexbox wird in Internet Explorer 10 und früheren Versionen nicht unterstützt.
Tipp: Lesen Sie mehr über flexible Boxen in unserem CSS Flexbox Tutorial .