Jak utworzyć: czterokolumnowy układ
- Poprzednia strona Układ trójkolumnowy
- Następna strona Rozszerzona siatka
Naucz się, jak używać CSS do tworzenia siatki czterokolumnowego układu.
Jak utworzyć czterokolumnowy układ
Krok 1 - Dodaj HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
Krok 2 - Dodaj CSS:
W tym przykładzie utworzymy czterokolumnowy układ:
Przykład
.column {
float: left;
width: 25%;
}
/* Usuwanie浮动 po kolumnach */
.row:after {
content: "";
display: table;
clear: both;
}
W tym przykładzie utworzymyResponsywnośćCzterokolumnowy układ:
Przykład
/* Responsywna layouts - 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%;
}
}
Strony związane
Lekcje:Układ witryny CSS
- Poprzednia strona Układ trójkolumnowy
- Następna strona Rozszerzona siatka
