Установка элементов div рядом в CSS: inline и float

Быстрый ответ

Для расположения блоков <div> в горизонтальной плоскости используйте Flexbox. Присвойте свойство display: flex; родительскому блоку.

<div style="display: flex;">
  <div>Первый</div> <!-- В лидерах моего призвания! -->
  <div>Второй</div> <!-- Неотступно следую за лидером! -->
</div>

Flexbox упорядочит дочерние элементы <div> горизонтально, представляя собой простое и заметно реагирующее на ваши действия решение задачи.

Методы горизонтального выравнивания

Использование свойства float: взгляд в прошлое

В прошлом float: left; служил одним из подходов к выравниванию блоков в одну линию, однако сейчас его использование не рекомендуется из-за возможных проблем с позиционированием.

<div style="float: left;">Первый</div> <!-- Без забот плывём по течению -->
<div style="float: left;">Второй</div> <!-- Следую твоим волнами! -->
<div style="clear: both;"></div> <!-- Плавание завершено, все свободны -->

Техника clearfix обеспечивает естественное поведение разметки после применения float.

Inline-block: оно всегда с нами

Альтернативой Flexbox может служить display: inline-block;. Не забывайте о пробелах в HTML, которые могут оказывать влияние на расположение элементов.

<div style="display: inline-block;">Первый</div> <!-- В строю -->
<div style="display: inline-block;">Второй</div> <!-- Рядышком -->

CSS Grid: для тех, кто предпочитает точность

CSS Grid — идеален для создания двумерных сеток, но также оказывается полезным при выравнивании элементов на одной оси. Позволяет точно контролировать их расположение.

<div style="display: grid; grid-template-columns: auto auto;">
  <div>Первый</div> <!-- Мы с Grid – идеальная команда! -->
  <div>Второй</div> <!-- В Grid'е я как у себя дома -->
</div>

Inline-flex: сочетание лучших практик

Свойство display: inline-flex; унаследовало преимущества блочной модели и гибкости Flexbox. Оно подходит для внедрения flex-контекста в поток inline элементов.

Визуализация

Вы можете визуализировать распределение элементов <div>, выстроенных рядом, следующим образом...

👫 Путь:  [👨<div>][👩<div>][👨<div>]

Каждый <div> представляет собой отдельного человека, и все они расположены рядом друг с другом.

.div-class {
  display: inline-block; /* Или flex, или float, или grid – в зависимости от ситуации */
}

Грамотная настройка свойства display напоминает цепочку, где каждое звено держится за руку с другими.

До применения CSS: [👨<div>] [👩<div>] [👨<div>]
После применения CSS: [👨<div>👩<div>👨<div>]

И вот они, все объединённые вместе, демонстрируя целостность и порядок. 👫👫👫

Детали, на которые стоит обратить внимание

Управление шириной блока

Выбор метода выравнивания подразумевает аккуратное управление шириной блоков:

.div-class {
  width: calc(50% – 10px); /* Учтём отступы, пожалуйста, доверьтесь нам и математике */
}

Отладка и совместимость

Столкнулись с проблемами в CSS? Справьтесь с ними при помощи инструментов разработчика. Используете старые браузеры? Тогда float может оказаться весьма полезным.

Значимость валидного кода

Убедитесь, что ваш HTML/CSS валиден, чтобы уберечь себя от неожиданностей в отображении. Инструменты валидации помогут обнаружить скрытые ошибки.

Практика – ключ к успеху

Теория – это важно, но без практики никак. Используйте демонстрационные примеры и экспериментируйте!

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

1. Полное руководство по Flexbox | CSS-Tricks — великолепный ресурс по Flexbox.
2. Основы Flexbox – CSS: Cascading Style Sheets | MDN — обучающие материалы по использованию Flexbox от создателей.
3. Полное руководство по CSS Grid | CSS-Tricks — обязательный ресурс для поклонников CSS Grid.
4. CSS Grid Layout – CSS: Cascading Style Sheets | MDN — глубокое погружение в мир CSS Grid вместе с профессионалами Mozilla.
5. Секреты CSS свойства 'float' — Smashing Magazine — узнайте всё об особенностях свойства float.
6. Flexbox Froggy – игровое обучение CSS Flexbox — освойте Flexbox играя.
7. Grid Garden – игра для усвоения CSS Grid — дидактическая игра, помогающая освоить CSS Grid и показать свою мастерство.