Jak utworzyć: układ dwukolumnowy

Naucz się, jak używać CSS do tworzenia siatki dwukolumnowej.

Kolumna 1

Niektwe teksty...

Kolumna 2

Niektwe teksty...

Spróbuj sam

Jak utworzyć układ dwukolumnowy

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

W tym przykładzie utworzymy dwie równoległe kolumny:Równoległekolumn:

Przykład float

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

Spróbuj sam

Nowoczesny sposób tworzenia układu dwukolumnowego to użycie CSS Flexbox. Jednak nie obsługuje on Internet Explorer 10 i wcześniejszych wersji.

Przykład Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Spróbuj sam

Możesz wybrać użycie float lub flex do tworzenia układu dwukolumnowego. Jednak jeśli musisz obsługiwać wersje IE10 i wcześniejsze, powinieneś użyć float.

Wskazówka:Dla uzyskania więcej informacji na temat modułu Flexible Box Layout przeczytaj nasz Przewodnik CSS Flexbox。

W tym przykładzie utworzymy dwie kolumny o różnej szerokości:

Przykład

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Spróbuj sam

W tym przykładzie utworzymy:ResponsywnyDwukolumnowy układ:

Przykład

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

Spróbuj sam

Powiązane strony

Przewodnik:CSS układ strony

Przewodnik:CSS odpowiedni projekt stron internetowych