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