Hoe te maken: gelijke kolommen

Leer hoe u gelijke kolommen kunt maken met CSS.

Hoe gelijke kolommen te maken

Wanneer uw kolommen naast elkaar moeten worden weergegeven, wilt u meestal dat ze dezelfde hoogte hebben (passend bij de hoogte van het hoogste element).

Probeer het zelf uit

Stap 1 - Voeg HTML toe:

<div class="col-container">
  <div class="col">
    <h2>Kolom 1</h2>
    <p>Hallo Wereld</p>
  </div>
  <div class="col">
    <h2>Kolom 2</h2>
    <p>Hallo Wereld!</p>
    <p>Hallo Wereld!</p>
    <p>Hallo Wereld!</p>
    <p>Hallo Wereld!</p>
  </div>
  <div class="col">
    <h2>Kolom 3</h2>
    <p>Andere tekst...</p>
    <p>Andere tekst...</p>
  </div>
</div>

Stap 2 - Voeg CSS toe:

.col-container {
  display: table; /* Maak de container-elementen als tabel weergeven */
  width: 100%; /* Stel in op volledige breedte om de hele pagina te vergroten */
}
.col {
  display: table-cell; /* Maak de elementen binnen de container als tabelcellen gedragen */
}

Probeer het zelf uit

Responsieve gelijke hoogte

De kolommen die we in het vorige voorbeeld hebben gemaakt, zijn responsief (als u de grootte van het browservenster in het voorbeeld aanpast, ziet u dat ze automatisch aanpassen aan de benodigde breedte en hoogte). Maar voor kleine schermen (zoals smartphones), wilt u misschien dat ze verticaal stapelen in plaats van horizontaal naast elkaar te staan:

Om dit te bereiken, voeg een media query toe en specificeer een scherm像素waarde voor deze breakpoint:

Voorbeeld

/* Als het browservenster kleiner is dan 600px, zet de kolommen in stapeling */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Probeer het zelf uit

Met Flexbox gelijke hoogte en breedte realiseren

U kunt ook Flexbox gebruiken om gelijke hoogte kaders te maken:

Voorbeeld

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

Probeer het zelf uit

Let op:Internet Explorer 10 en oudere versies ondersteunen geen Flexbox.

Related pages

Tutorial:CSS Flexbox