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