Узнайте, как создать адаптивную компоновку столбцов, которая варьируется между 4 столбцами, 2 столбцами и столбцами полной ширины в зависимости от ширины экрана.
[html]
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<style>
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}</style>
[/html]
Шаг 1) добавить HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
Шаг 2) добавить CSS:
В этом примере мы создадим четыре столбца макета, которые будут преобразованы в два столбца на экранах, которые меньше, чем 900px шириной. Тем не менее, на экранах, которые меньше, чем 600px шириной, столбцы будут стек поверх друг друга, а не плавающие рядом друг с другом.
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
- Подпись автора