Jak utworzyć: trójkolumnowy układ

Naucz się, jak używać CSS do tworzenia siatki trójkolumnowego układu.

Kolumna 1

Niektóry tekst...

Kolumna 2

Niektóry tekst...

Kolumna 3

Niektóry tekst...

Spróbuj sam

Jak utworzyć trójkolumnowy układ

Krok 1 - Dodaj HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Krok 2 - Dodaj CSS:

W tym przykładzie utworzymy trzyJednakowe szerokościKolumny:

Przykład

.column {
  float: left;
  width: 33.33%;
}
/* Usunięcie przepływu po kolumnach */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Spróbuj sam

W tym przykładzie utworzymy trzyNiejednakowe szerokościKolumny:

Przykład

.column {
  float: left;
}
.left, .right {
  width: 25%;
}
.middle {
  width: 50%;
}

Spróbuj sam

W tym przykładzie utworzymyResponsywnyTrzykolumnowy układ:

Przykład

/* Responsywna rozkładka - gdy szerokość ekranu jest mniejsza niż 600px, kolumny są układane jeden nad drugim zamiast równolegle */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Spróbuj sam

Strony związane

Tutorial:Układ strony CSS

Tutorial:CSS projektowanie responsywnej witryny