Wie man erstellt: gleiche Spalten

Lernen Sie, wie man mit CSS gleiche Spalten erstellt.

Wie man gleiche Spalten erstellt

Wenn Ihre Spalten nebeneinander angezeigt werden sollen, möchten Sie in der Regel, dass sie die gleiche Höhe haben (passen auf die höchste Höhe).

Versuchen Sie es selbst.

Schritt 1 - Fügen Sie HTML hinzu:

<div class="col-container">
  <div class="col">
    <h2>Spalte 1</h2>
    <p>Hallo Welt</p>
  </div>
  <div class="col">
    <h2>Spalte 2</h2>
    <p>Hallo Welt!</p>
    <p>Hallo Welt!</p>
    <p>Hallo Welt!</p>
    <p>Hallo Welt!</p>
  </div>
  <div class="col">
    <h2>Spalte 3</h2>
    <p>Einige andere Texte..</p>
    <p>Einige andere Texte..</p>
  </div>
</div>

Schritt 2 - Fügen Sie CSS hinzu:

.col-container {
  display: table; /* Macht den Container-Element so aus, als wären sie eine Tabelle */
  width: 100%; /* Auf die volle Breite setzen, um die gesamte Seite zu erweitern */
}
.col {
  display: table-cell; /* Macht den Elementen im Container so aus, als wären sie Zellen einer Tabelle */
}

Versuchen Sie es selbst.

Responsiv gleiche Höhe

Die Spalten, die wir im letzten Beispiel erstellt haben, sind responsiv (wenn Sie die Größe des Browserfensters in Ihrem Beispiel anpassen, sehen Sie, dass sie sich automatisch auf die erforderliche Breite und Höhe anpassen). Aber für kleine Bildschirme (wie Smartphones) möchten Sie möglicherweise, dass sie vertikal gestapelt werden, anstatt horizontal nebeneinander zu stehen:

Um dies zu erreichen, fügen Sie eine Medienabfrage hinzu und geben Sie für diese einen Breitenpunkt in Pixeln an:

Beispiel

/* Wenn das Browserfenster kleiner als 600px ist, sollen die Spalten gestapelt werden */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Versuchen Sie es selbst.

Flexbox für gleiche Höhe und Breite umsetzen

Sie können auch Flexbox verwenden, um gleiche Boxen zu erstellen:

Beispiel

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Versuchen Sie es selbst.

Hinweis:Internet Explorer 10 und frühere Versionen unterstützen Flexbox nicht.

Related pages

Tutorial:CSS Flexbox