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