Разделение div на две колонки CSS: сохранение фона
Быстрый ответ
Если вам необходимо срочно разделить div на две колонки, предлагаю использовать CSS Flexbox. Присвойте контейнеру свойство display: flex;
, а каждому из вложенных div – flex: 1;
:
<div style="display: flex;">
<div style="flex: 1;">Колонка 1</div>
<div style="flex: 1;">Колонка 2</div>
</div>
В результате получатся две колонки одинаковой ширины внутри родительского div. Простейшее, точное и эффективное решение!
Адаптивная верстка с "жидким" макетом
Чтобы макет был адаптивным, необходимо применить процентное задание ширины. Это позволит макету без проблем приспосабливаться под размеры любого экрана, при этом сохраняя свою удобность использования и доступность:
.div-column {
width: 50%; /* Избегаем лишних изобретений */
float: left; /* Для создания всплывающего эффекта */
}
Чтобы на узких экранах колонки располагались вертикально, используйте медиа-запросы:
@media (max-width: 600px) {
.div-column {
width: 100%;
float: none; /* Отсутствие всплывающего эффекта */
}
}
Визуализация
Можно визуализировать веб-страницу как рубашку с двумя равными карманами:
+-----------------------+
| 👕 |
| / \ |
| / \ |
| / | \ |
| /_____ | _____\ |
+-----------------------+
После применения CSS наша рубашка превратится в модель с двуми равными карманами:
.div-container {
display: flex; /* Рубашка решает быть гибкой */
}
.div-column {
flex: 1; /* Карманы делят пространство поровну */
}
Теперь рубашка выглядит вот так:
+-----------------------+
| 👕 |
| / \ |
| / | | \ |
| / | | \ |
| /____| |____\ |
+-----------------------+
Каждый карман представляет собой колонку идеального размера для размещения вашего контента.
Соблюдение структуры и чистоты кода
Чтобы код был профессиональным, следует придерживаться принципа разделения ответственности: используйте внешние CSS-файлы вместо прямого задания стилей, это облегчит поддержку кода:
<!-- Такой подход лучше избегать -->
<div style="display: flex;">
...
</div>
<!-- Правильный способ -->
<link rel="stylesheet" href="style.css">
<div class="div-container">
...
</div>
В файле style.css
:
.div-container {
display: flex;
}
/* ... */
Мастерство применения дополнительных свойств CSS
С помощью таких свойств CSS, как column-gap
для создания промежутков и column-rule
для добавления границ, можно значительно улучшить визуальное восприятие макета:
.div-container {
column-gap: 1em; /* Позволим элементам дышать */
column-rule: 1px solid #ccc; /* Сделаем границы заметными */
}
Использование преимуществ продвинутых технологий
Для динамических макетов изучите возможности CSS grid
или columns
. Свойство grid-template-columns в CSS Grid предоставит вам простор для творчества при проектировании макетов:
.div-container {
display: grid; /* Сетка готова к старту! */
grid-template-columns: 1fr 1fr; /* Обеспечим равномерное распределение пространства */
}
Чудо clearfix и фоновых цветов
Применяя clearfix, можно добиться интегральности макета и корректного отображения фоновых цветов:
.div-container::after {
content: "";
display: table;
clear: both; /* Волны раздвигаются в стороны */
}
Этот псевдоэлемент предупредит нежелательные эффекты взаимодействия с "floating" элементами.
Мощь Bootstrap и других фреймворков
Такие фреймворки, как Bootstrap, предлагают готовую систему сеток, упрощающую построение адаптивных макетов. Достаточно только применить нужные классы:
<div class="row">
<div class="col">Колонка 1</div>
<div class="col">Колонка 2</div>
</div>
Образование колонок без использования лишних div
Свойство CSS column-count
позволяет разбивать контент на колонки без использования дополнительных div:
.content-div {
column-count: 2; /* Делаем разбиение за счет двух колонок */
}
Настройте break-inside таким образом, чтобы избежать разделения содержимого между колонками:
.content-div p {
break-inside: avoid; /* Убираем нежелательные разрывы */
}
Полезные материалы
- Полное руководство по Flexbox | CSS-Tricks — Ресурс по всему, что касается Flexbox, которое является основным инструментом для управления элементами.
- Использование макетов с несколькими колонками – CSS: Каскадные таблицы стилей | MDN — Руководство по макетам с несколькими колонками для облегчения чтения.
- CSS Multiple Columns — Простое пошаговое руководство по созданию многоколоночных макетов при помощи CSS3.
- Grid Garden – Игра для изучения CSS grid — Ученик всегда найдет способ освоить CSS Grid.
- Flexbox | Codrops — Детальный справочник с примерами использования Flexbox для адаптивной верстки.
- Учебник | DigitalOcean — Руководство по применению CSS Grid для создания «приклеенных» шапок и подвалов страницы.
- Изучим CSS Grid, создавая 5 макетов за 17 минут — Наглядные уроки позволят вам освоить CSS Grid на практике.