Разделение 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; /* Убираем нежелательные разрывы */
}

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks — Ресурс по всему, что касается Flexbox, которое является основным инструментом для управления элементами.
2. Использование макетов с несколькими колонками – CSS: Каскадные таблицы стилей | MDN — Руководство по макетам с несколькими колонками для облегчения чтения.
3. CSS Multiple Columns — Простое пошаговое руководство по созданию многоколоночных макетов при помощи CSS3.
4. Grid Garden – Игра для изучения CSS grid — Ученик всегда найдет способ освоить CSS Grid.
5. Flexbox | Codrops — Детальный справочник с примерами использования Flexbox для адаптивной верстки.
6. Учебник | DigitalOcean — Руководство по применению CSS Grid для создания «приклеенных» шапок и подвалов страницы.
7. Изучим CSS Grid, создавая 5 макетов за 17 минут — Наглядные уроки позволят вам освоить CSS Grid на практике.