Jak tworzyć: równe kolumny

Naucz się, jak używać CSS do tworzenia równych kolumn.

Jak tworzyć równe kolumny

Kiedy Twoje kolumny powinny być wyświetlane równolegle, zazwyczaj chcesz, aby miały one tę samą wysokość (pasują do najwyższej wysokości).

Spróbuj osobiście

Krok 1 - Dodaj HTML:

<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>

Krok 2 - Dodaj CSS:

.col-container {
  display: table; /* Sprawia, że elementy kontenera zachowują się jak tabela */
  width: 100%; /* Ustaw na pełną szerokość, aby rozszerzyć całą stronę */
}
.col {
  display: table-cell; /* Sprawia, że elementy wewnątrz kontenera zachowują się jak komórki tabeli */
}

Spróbuj osobiście

Responsywne równe boki

Kolumny utworzone w poprzednim przykładzie są responsywne (jeśli zmniejszysz rozmiar okna przeglądarki, zauważysz, że automatycznie dostosują się do wymaganego szerokości i wysokości). Ale dla małych ekranów (np. smartfonów), możesz chcieć, aby były one układane pionowo zamiast poziomo w szeregu:

Aby to osiągnąć, dodaj zapytanie media i określ wartość pikseli przerwania:

Przykład

/* Jeśli okno przeglądarki jest mniejsze niż 600px, kolumny będą układane w pionie */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Spróbuj osobiście

Użycie Flexbox do osiągnięcia równych wysokości i szerokości

Możesz również użyć Flexbox do tworzenia równych boków:

Przykład

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

Spróbuj osobiście

Uwaga:Wersja Internet Explorer 10 i wcześniejsze nie obsługuje Flexbox.

Strony związane

Tutorial:CSS Flexbox