5 способов разместить блоки div рядом: от Flexbox до Display Table

Для кого эта статья:

• Фронтенд-разработчики, стремящиеся улучшить навыки верстки
• Студенты и начинающие веб-разработчики, изучающие CSS

• Практикующие разработчики, заинтересованные в современных методах размещения элементов на странице

  Задача разместить два блока рядом кажется элементарной — пока не сталкиваешься с ней на практике! 😅 Каждый фронтенд-разработчик однажды ломает голову над тем, почему его аккуратные div-ы упрямо выстраиваются друг под другом вместо того, чтобы встать в ряд. Эта статья раскрывает 5 надежных способов расположить элементы горизонтально, от классических методов до современных подходов. Независимо от вашего уровня, вы найдете решение, которое идеально подойдет для вашего проекта.

Хотите не только разобраться с размещением блоков, но и полностью овладеть искусством верстки? На курсе Обучение веб-разработке от Skypro вы изучите не только все методы позиционирования элементов, но и создадите полноценные адаптивные сайты под руководством практикующих разработчиков. Уже через 3 месяца вы сможете создавать макеты любой сложности, а не только размещать два блока рядом. Запишитесь сейчас и получите 5 готовых шаблонов в подарок!

Что такое блоки div и почему их размещение важно

Div (от английского "division" – раздел) – это контейнерный элемент HTML, который позволяет группировать содержимое и применять к нему стили. По умолчанию div занимает всю доступную ширину родительского элемента и выстраивается в вертикальный стек с другими блочными элементами.

Этот блочный характер div-ов создаёт основную проблему при попытке разместить их рядом друг с другом. Без дополнительных CSS-инструкций два div-блока всегда будут располагаться один под другим, что часто не соответствует дизайнерским задумкам.

Правильное горизонтальное размещение элементов критически важно по нескольким причинам:

• Оптимизация пространства – особенно на широких экранах, где вертикальное расположение элементов создаёт ненужные пустоты
• Улучшение пользовательского опыта – логически связанные элементы должны располагаться рядом
• Создание сложных макетов – колонки, сетки и многоуровневая навигация требуют горизонтального расположения элементов
• Адаптивность – при правильной реализации горизонтальные элементы могут корректно перестраиваться на мобильных устройствах

Умение правильно располагать блоки — фундаментальный навык верстки, без которого невозможно создать современный интерфейс. Давайте рассмотрим пять проверенных способов решения этой задачи, начиная с самого современного и гибкого.

Метод Flexbox: самый современный способ размещения

Flexbox (Flexible Box Layout) — революционный инструмент в арсенале верстальщика, позволяющий легко управлять расположением элементов в одномерном пространстве. Это идеальное решение для размещения блоков div в одну линию.

Основная идея Flexbox проста: вы определяете контейнер как flex-контейнер, и все его дочерние элементы автоматически становятся flex-элементами, которые могут гибко изменять свои размеры и положение.

Вот базовый пример размещения двух блоков рядом с помощью Flexbox:

.container {
display: flex;
}

.box {
width: 200px;
height: 200px;
background-color: #3498db;
margin: 10px;
}

HTML-структура будет выглядеть так:

<div class="container">
<div class="box">Блок 1</div>
<div class="box">Блок 2</div>
</div>

Это всё! 🎉 Всего одно свойство display: flex автоматически размещает дочерние элементы в строку.

Но Flexbox предлагает гораздо больше возможностей для точного контроля над размещением:

Александр Петров, Senior Frontend Developer

Помню, как в 2016 году получил макет с необычным расположением карточек товаров — они должны были выравниваться по центру и автоматически перестраиваться при изменении размера экрана. Я битый час пытался это сделать через float, даже пробовал таблицы от отчаяния!

Коллега, увидев мои мучения, сказал: "Попробуй Flexbox". Я добавил два свойства — display: flex и flex-wrap: wrap — и всё заработало как по волшебству. Сегодня я использую Flexbox в 80% случаев размещения элементов, и код стал в разы чище и понятнее. Для простой задачи размещения двух блоков рядом лучшего решения просто не существует.

Преимущества Flexbox:

• Простота использования — минимум кода для базовых задач
• Автоматическое распределение пространства
• Вертикальное выравнивание "из коробки"
• Переупорядочивание элементов без изменения HTML
• Отличная поддержка во всех современных браузерах

Если вам нужно быстро и надежно разместить блоки рядом друг с другом, Flexbox должен быть вашим первым выбором в 2023 году.

CSS Grid: мощный инструмент для сложных макетов

CSS Grid выводит позиционирование элементов на новый уровень, предоставляя двумерную систему макета. В отличие от одномерного Flexbox, Grid позволяет контролировать как строки, так и столбцы одновременно, что делает его идеальным для более сложных макетов.

Для простой задачи размещения двух блоков рядом CSS Grid может показаться избыточным, но его сила в гибкости и масштабируемости. Если вы предвидите, что в будущем вам понадобится добавить больше элементов или создать более сложную структуру, Grid — отличный выбор.

Базовый пример размещения двух блоков с помощью Grid:

.container {
display: grid;
grid-template-columns: 1fr 1fr; /* Две колонки равной ширины */
}

.box {
height: 200px;
background-color: #27ae60;
margin: 10px;
}

HTML остаётся точно таким же, как и в предыдущем примере:

<div class="container">
<div class="box">Блок 1</div>
<div class="box">Блок 2</div>
</div>

Ключевое свойство здесь — grid-template-columns, которое определяет количество и размер столбцов. Значение 1fr 1fr создаёт два столбца, каждый из которых занимает одну "свободную единицу" доступного пространства, то есть делит пространство поровну.

CSS Grid предлагает множество мощных функций для управления макетом:

Более продвинутый пример с использованием Grid для двух блоков разной ширины:

.container {
display: grid;
grid-template-columns: 2fr 1fr; /* Соотношение 2:1 */
grid-gap: 20px; /* Отступ между блоками */
}

Этот код создаст два блока, где первый будет в два раза шире второго, с отступом между ними в 20 пикселей.

Преимущества CSS Grid для размещения блоков:

• Точный контроль над размерами как по горизонтали, так и по вертикали
• Встроенные отступы через grid-gap (без необходимости манипулировать margin)
• Возможность создания сложных макетов, которые легко расширять
• Поддержка именованных областей для интуитивного размещения контента
• Отличная совместимость с адаптивным дизайном

CSS Grid идеально подходит, когда вы создаете макет, который будет расширяться в будущем, или когда вам нужно точное позиционирование элементов в двумерном пространстве. 🧩

Float свойство: классический подход к позиционированию

До появления Flexbox и Grid свойство float было основным инструментом для размещения элементов рядом друг с другом. Несмотря на то, что сейчас этот метод считается устаревшим для сложных макетов, он по-прежнему полезен в определённых ситуациях и поддерживается всеми браузерами, включая устаревшие.

Принцип работы float простой: элемент "всплывает" к левому или правому краю своего контейнера, а остальной контент обтекает его. Для размещения двух блоков рядом нужно применить свойство float к обоим элементам.

Базовый пример использования float:

.box {
float: left;
width: 45%; /* Меньше 50% для учета отступов */
height: 200px;
background-color: #e74c3c;
margin: 10px;
}

.container::after {
content: "";
display: table;
clear: both;
}

HTML-структура остаётся прежней:

<div class="container">
<div class="box">Блок 1</div>
<div class="box">Блок 2</div>
</div>

Обратите внимание на класс clearfix для контейнера — это важный нюанс при работе с float. Без очистки float родительский контейнер может "схлопнуться", так как float-элементы исключаются из потока документа.

Мария Иванова, Технический директор

В 2012 году наша команда получила проект по верстке крупного новостного портала. Макет включал сложную шапку с логотипом слева и навигацией справа, основной контент с новостными колонками и боковую панель с рекламой.

Flexbox тогда только появился и имел ограниченную поддержку, так что мы использовали float для всего макета. Это работало, но любое изменение превращалось в головную боль — приходилось переписывать clearfix, проверять, не "поплыл" ли макет в IE7.

Сегодня, когда я смотрю на проекты с использованием Flexbox и Grid, я вижу, насколько проще стала жизнь разработчиков. Но знание float всё еще полезно — иногда это самый быстрый способ "обтекания" контентом небольшого элемента, например изображения в тексте статьи.

Преимущества и недостатки метода float:

• Преимущества:
• Максимальная кроссбраузерность, включая очень старые браузеры
• Простая реализация для базовых задач
• Полезен для обтекания текстом изображений и других элементов
• Недостатки:
• Необходимость очистки float (clearfix)
• Сложности с вертикальным выравниванием
• Неинтуитивное поведение при создании сложных макетов
• Проблемы с вычислением высоты родительского элемента

Когда стоит использовать float в 2023 году:

• Если требуется поддержка очень старых браузеров
• Для обтекания текстом отдельных элементов (например, изображений)
• В качестве запасного варианта (fallback) для более современных методов
• При работе с устаревшими системами или фреймворками, которые опираются на float

Хотя float и не является современным решением для создания макетов, знание этого метода по-прежнему полезно для веб-разработчика. 🧐

Inline-block и display table: альтернативные методы

Inline-block и display: table представляют собой два альтернативных подхода к размещению блоков рядом друг с другом. Эти методы занимают промежуточное положение между устаревшими техниками (float) и современными решениями (Flexbox, Grid).

Метод 1: Inline-block

Свойство display: inline-block создаёт элемент, который сочетает характеристики как строчных (inline), так и блочных элементов. Такие элементы выстраиваются в строку как текст, но при этом к ним можно применять свойства блочных элементов (width, height и т.д.).

Пример использования inline-block:

.container {
font-size: 0; /* Устраняет пробелы между элементами */
}

.box {
display: inline-block;
width: 48%;
height: 200px;
background-color: #9b59b6;
margin: 1%;
vertical-align: top; /* Важно для выравнивания по верхнему краю */
font-size: 16px; /* Возвращаем нормальный размер шрифта */
}

HTML-структура не меняется:

<div class="container">
<div class="box">Блок 1</div>
<div class="box">Блок 2</div>
</div>

Обратите внимание на трюк с font-size: 0 для контейнера — это необходимо, чтобы устранить пробелы между inline-block элементами, которые образуются из-за пробелов и переносов строк в HTML-коде.

Метод 2: Display Table

Этот метод использует CSS-таблицы, имитируя поведение HTML-таблиц без их семантического значения. Это создаёт предсказуемый макет с ячейками, выстроенными в ряд.

Пример использования display: table:

.container {
display: table;
width: 100%;
table-layout: fixed; /* Оптимизирует расчёт ширины */
}

.box {
display: table-cell;
height: 200px;
background-color: #f1c40f;
padding: 10px;
}

HTML остаётся тем же:

<div class="container">
<div class="box">Блок 1</div>
<div class="box">Блок 2</div>
</div>

Сравнение inline-block и display: table:

Когда использовать эти методы:

• Inline-block:
• Для простого выстраивания элементов в ряд
• Когда требуется поддержка устаревших браузеров
• Для навигационных меню и простых панелей инструментов
• Display: table:
• Для выравнивания высоты соседних элементов
• Когда необходимо вертикальное центрирование содержимого
• Для создания макетов с фиксированным и гибким содержимым

Хотя эти методы считаются менее современными, чем Flexbox и Grid, они всё еще могут быть полезными в определённых ситуациях, особенно когда требуется обратная совместимость с устаревшими браузерами или интеграция с существующим кодом. 📚

Сравнение всех способов и когда их использовать

Выбор правильного метода размещения блоков рядом друг с другом зависит от множества факторов: сложности макета, требований к адаптивности, поддержки браузеров и личных предпочтений. Давайте сравним все пять методов, чтобы определить, когда лучше использовать каждый из них.

Когда использовать Flexbox:

• Для большинства современных проектов
• Когда элементы должны быть выровнены в одном измерении (горизонтально или вертикально)
• При необходимости равномерного распределения пространства
• Для центрирования элементов как по горизонтали, так и по вертикали
• Когда порядок элементов может изменяться

Когда использовать CSS Grid:

• Для сложных макетов с несколькими строками и столбцами
• При создании адаптивных сеток с множеством элементов
• Когда элементы должны быть выровнены как по горизонтали, так и по вертикали
• Для асимметричных макетов с элементами разного размера
• Когда требуется точный контроль над размещением элементов

Когда использовать Float:

• При необходимости поддержки очень старых браузеров (IE 6-8)
• Для обтекания изображений текстом
• При работе с устаревшими системами или кодовой базой
• Когда другие методы не подходят из-за специфических требований

Когда использовать Inline-block:

• Для простых горизонтальных меню или списков
• Когда требуется простое и понятное решение
• При необходимости поддержки устаревших браузеров, но с более чистым кодом, чем float
• Когда элементы должны вести себя как текст (с учетом line-height, vertical-align)

Когда использовать Display: table:

• Для выравнивания соседних элементов по высоте
• При необходимости вертикального центрирования в старых браузерах
• Когда макет должен имитировать поведение таблицы, но без семантики таблицы
• Для создания колонок одинаковой высоты

В современной веб-разработке рекомендуется начинать с Flexbox для простых одномерных макетов и переходить к Grid для более сложных двумерных макетов. Остальные методы следует рассматривать как запасные варианты или решения для особых случаев.

Помните, что можно комбинировать различные методы в одном проекте! Например, использовать Grid для основного макета страницы, Flexbox для отдельных компонентов и float для обтекания изображений текстом. 🔄

Размещение блоков div рядом друг с другом — одна из фундаментальных задач CSS-верстки, и как мы увидели, существует множество способов её решения. От современного Flexbox до классического float — каждый метод имеет свои преимущества и область применения. Выбор правильного подхода зависит от конкретных требований проекта и вашего личного стиля кодирования. Мастерство верстальщика заключается не столько в знании всех техник, сколько в умении выбрать оптимальное решение для каждой задачи.