Hur man skapar: lika höga kolumner

Lär dig hur du skapar lika höga kolumner med CSS.

Hur man skapar lika höga kolumner

När dina kolumner ska visas i rad, vill du ofta att de har samma höjd (matchar den högsta höjden).

Prova själv

Steg 1 - Lägg till HTML:

<div class="col-container">
  <div class="col">
    <h2>Kolumn 1</h2>
    <p>Hej Världen</p>
  </div>
  <div class="col">
    <h2>Kolumn 2</h2>
    <p>Hej Världen!</p>
    <p>Hej Världen!</p>
    <p>Hej Världen!</p>
    <p>Hej Världen!</p>
  </div>
  <div class="col">
    <h2>Kolumn 3</h2>
    <p>Andra texter...</p>
    <p>Andra texter...</p>
  </div>
</div>

Steg 2 - Lägg till CSS:

.col-container {
  display: table; /* Låt kontainer-elementen uppträda som en tabell */
  width: 100%; /* Sätt till full bredd för att utöka hela sidan */
}
.col {
  display: table-cell; /* Låt elementen inom kontaineren uppträda som tabellceller */
}

Prova själv

Responsiv lika höjd

Kolumnerna som vi skapade i föregående exempel är responsiva (om du justerar storleken på webbläsarfönstret kommer du att se att de automatiskt justeras till den önskade bredden och höjden). Men, för små skärmar (som smartphones), kanske du vill att de ska staplas vertikalt istället för att ligga horisontellt bredvid varandra:

För att uppnå detta, lägg till en mediamätare och specificera en brytpunkt i pixlar:

Exempel

/* Om browserfönstret är mindre än 600px, låt kolonnerna staplas */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Prova själv

Uppnå lika höjd och bredd med Flexbox

Du kan också använda Flexbox för att skapa lika höga rutor:

Exempel

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

Prova själv

Observera:Internet Explorer 10 och tidigare versioner stöder inte Flexbox.

Relaterade sidor

Tutorial:CSS Flexbox