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