Sådan oprettes: lige højde kolonner

Lær at oprette lige højde kolonner med CSS.

Sådan oprettes lige højde kolonner

Når dine kolonner skal vises parallelt, vil du ofte ønske, at de har samme højde (matcher den højeste højde).

Prøv det selv

Første trin - Tilføj HTML:

<div class="col-container">
  <div class="col">
    <h2>Kolonne 1</h2>
    <p>Hej Verden</p>
  </div>
  <div class="col">
    <h2>Kolonne 2</h2>
    <p>Hej Verden!</p>
    <p>Hej Verden!</p>
    <p>Hej Verden!</p>
    <p>Hej Verden!</p>
  </div>
  <div class="col">
    <h2>Kolonne 3</h2>
    <p>Anden tekst...</p>
    <p>Anden tekst...</p>
  </div>
</div>

Andet trin - Tilføj CSS:

.col-container {
  display: table; /* Gør beholderen til at se ud som en tabel */
  width: 100%; /* Sæt til fuld bredde for at udvide hele siden */
}
.col {
  display: table-cell; /* Gør elementerne i beholderen udseende som tabellenheder */
}

Prøv det selv

Responsive lige højde

Kolonnerne, vi oprettede i sidste eksempel, er responsive (hvis du justerer browservinduets størrelse i forsøget, vil du se, at de automatisk justerer til den ønskede bredde og højde). Men for små skærme (som smartphones), kan du måske ønske, at de stables vertikalt i stedet for at være vandret:

For at opnå dette skal du tilføje en medieforespørgsel og specificere en skæringspunktspixelsværdi:

Eksempel

/* Hvis browservinduet er mindre end 600px, skal kolonnerne stables */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Prøv det selv

Opnå lige højde og bredde med Flexbox

Du kan også bruge Flexbox til at oprette lige højde rammer:

Eksempel

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

Prøv det selv

Bemærk:Internet Explorer 10 og tidligere versioner understøtter ikke Flexbox.

Relaterede sider

Tutorial:CSS Flexbox