как создать: четырёхколонный макет
- Предыдущая страница Трехколонный макет
- Следующая страница Расширенная сетка
изучите, как использовать CSS для создания сетки четырёхколонного макета.
как создать четырёхколонный макет
первый шаг - добавьте HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
второй шаг - добавьте CSS:
в этом примере мы создадим четырёхколонный макет:
пример
.column {
float: left;
ширина: 25%;
}
/* удаление浮动 после колонок */
.row:after {
content: "";
display: table;
clear: both;
}
в этом примере мы создадимадаптивныйчетырёхколонный макет:
пример
/* адаптивная вёрстка - когда ширина экрана меньше 600px, три колонки должны быть堆积аны, а не расположены параллельно */
@media screen and (max-width: 600px) {
.column {
ширина: 100%;
}
}
Соответствующие страницы
Уроки:Макет сайта CSS
- Предыдущая страница Трехколонный макет
- Следующая страница Расширенная сетка
