Как выровнять два блока рядом в CSS: 3 рабочих способа

Самый простой способ: два блока рядом через Flexbox

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

• Родительский элемент: display: flex;
• Дочерние блоки: по умолчанию встают в ряд, ширина подстраивается под содержимое.

Пример кода:

.container {
  display: flex;
}
.block {
  padding: 20px;
  border: 1px solid #ccc;
}

Такой подход работает во всех современных браузерах и не требует обнуления float или дополнительных хаков. Flexbox гибок: можно задать выравнивание по вертикали (align-items) и распределение свободного пространства (justify-content).

Как поставить два блока рядом в CSS с display: flex

Чтобы разместить рядом две колонки, часто применяют гибкую модель компоновки. Разобраться, как поставить два блока рядом css, проще всего на примере flexbox. Достаточно назначить контейнеру свойство display: flex. Дочерние элементы выстроятся в ряд автоматически.

Основные моменты для понимания:

• Контейнер с display: flex становится родителем.
• Все прямые потомки превращаются во флекс-элементы.
• По умолчанию они располагаются горизонтально.

Вот как это выглядит в коде:

Выравнивание блоков по горизонтали и вертикали

Когда два элемента размещены в одной строке, часто требуется откорректировать их взаимное расположение. Горизонтальное выравнивание (слева, по центру, справа) и вертикальное (по верхнему краю, середине, низу) управляются разными свойствами. Для display: flex это параметры justify-content (горизонталь) и align-items (вертикаль). В сетке display: grid используются justify-items и align-items. Для display: inline-block вертикальное положение регулируется через vertical-align.

Классический метод: два блока рядом на Grid

CSS Grid Layout предлагает элегантное решение для размещения элементов в строку. Достаточно задать контейнеру свойство display: grid и определить число колонок через grid-template-columns. Например, конструкция grid-template-columns: 1fr 1fr делит доступное пространство поровну между двумя ячейками. Этот подход удобен тем, что не требует дополнительных обёрток или расчётов ширины. Сетка автоматически выравнивает высоту ячеек по самому высокому содержимому, избавляя от типичных проблем с плавающими элементами.

Как поставить два блока рядом css с помощью CSS Grid

CSS Grid предлагает более структурированный подход к раскладке. Чтобы расположить элементы в ряд, достаточно задать контейнеру свойство display: grid и указать количество колонок через grid-template-columns. Например:

• grid-template-columns: 1fr 1fr — две равные колонки.
• grid-template-columns: 200px auto — фиксированная и гибкая части.
• grid-template-columns: repeat(2, 1fr) — лаконичная запись для двух одинаковых долей.

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

Настройка отступов между блоками (gap)

Расстояние между элементами регулируется свойством gap. Оно работает как для Flexbox, так и для Grid, заменяя устаревшие трюки с отрицательными полями.

Синтаксис прост:

• Одно значение задаёт вертикальные и горизонтальные интервалы одновременно.
• Два значения: первое — межстрочный отступ, второе — между колонками.

Например, gap: 20px 10px создаст 20 пикселей между строками и 10 — между столбцами. В отличие от margin, эта величина не схлопывается и не влияет на внешние границы контейнера.

Старый, но рабочий способ: два блока на float

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

• Задайте обоим контейнерам float: left или float: right.
• Добавьте width (например, 50% или 200px), иначе изделия сожмутся по содержимому.
• После пары блоков разместите пустой элемент с clear: both, чтобы родитель не «схлопнулся».

Этот вариант не требует сложных вычислений, но плохо подходит для адаптивных макетов.

Как поставить два блока рядом в CSS с float: left

Старый, но всё ещё рабочий метод — применить свойство float со значением left. Элементы получают способность прижиматься к левому краю родителя, выстраиваясь в ряд. Однако у такого подхода есть нюансы:

• Родительский контейнер может «схлопнуться» — потерять высоту. Решается добавлением overflow: hidden или псевдоэлемента ::after с clear: both.
• Ширину каждой колонки задают явно (например, 50% или фиксированные пиксели), иначе блоки могут перенестись на новую строку.

Несмотря на моральную устарелость, техника до сих пор встречается в поддержке старых проектов.

Как поставить два блока рядом без Flex и Grid

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

• Свойство float — позволяет прижать элемент к левому или правому краю родителя, заставляя соседние объекты обтекать его. Для двух колонок достаточно задать обоим блокам float: left.
• Отображение через inline-block — элементы становятся строчно-блочными, выстраиваясь в строку. Важно убрать пробелы между тегами в HTML или обнулить размер шрифта у контейнера.
• Табличная верстка — родителю ставится display: table, а дочерним элементам — display: table-cell. Это гарантирует одинаковую высоту колонок.

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

Использование display: inline-block для двух блоков

Свойство display: inline-block — простой метод размещения элементов в строку. Каждый блок сохраняет свои размеры (ширину, высоту, отступы), но ведёт себя как строчный объект — соседи располагаются рядом.

Пример настройки:

• Задайте обоим контейнерам display: inline-block.
• Укажите width (например, 45% + 45% с учётом зазора).
• Добавьте vertical-align: top, чтобы выровнять их по верхнему краю.

Минус: между элементами появляется пробел в 3-4 пикселя из-за переноса строки в HTML. Убирается установкой font-size: 0 у родителя или удалением пробелов в разметке.

Убираем лишний пробел между inline-block элементами

При использовании display: inline-block между элементами часто появляется нежелательный отступ размером около 4 пикселей. Это связано с тем, что браузер воспринимает пробелы и переносы строк в HTML-коде как символы.

Вот несколько способов устранить эту проблему:

• Пишите теги вплотную — закройте один блок и сразу открывайте следующий без пробелов: </div><div>.
• Установите родителю размер шрифта ноль: font-size: 0, а затем верните нужный шрифт самим блокам.
• Используйте отрицательные margin, например margin-right: -4px для каждого элемента.

Последний вариант считается менее надёжным, так как значение зависит от кегля.