Выравнивание div элементов горизонтально с CSS: float, overflow

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

Чтобы расположить блоки div горизонтально, рекомендуется применить к родительскому контейнеру свойство flexbox, то есть display: flex;.

.container {
  display: flex;
  /* Все идет гладко */
}

<div class="container">
  <div>Первый</div><div>Второй</div><div>Третий</div>
  <!-- Разделяй и властвуй -->
</div>

Таким образом, родительский div становится флекс-контейнером, а все его дочерние элементы выстраиваются в ряд, словно утята.

Осваиваем мощь Flexbox

Управление флекс-элементами

Flexbox очень гибок и позволяет с лёгкостью позиционировать дочерние элементы. Свойство justify-content: space-evenly; обеспечит равномерное горизонтальное распределение блоков:

.container {
  display: flex;
  justify-content: space-evenly; /* Магия равномерного распределения */
}

Подробнее об этом расскажет наш спикер на видео

Адаптация к разным экранам

Чтобы ваш дизайн оставался адаптивным на различных устройствах, можете использовать медиа-запросы для корректировки расположения элементов в зависимости от размера окна браузера (viewport):

@media (max-width: 600px) {
  .container {
    flex-direction: column;
    /* Небольшое изменение в CSS – огромный шаг к адаптивности */
  }
}

Использование БЭМ для структурирования

С помощью БЭМ-нотации вы сможете сделать ваш CSS более структурированным и очевидным:

<div class="container">
  <div class="container__item">Первый</div>
  <div class="container__item">Второй</div>
  <div class="container__item">Третий</div>
  <!-- Вносим 'Б' в БЭМ -->
</div>

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

Вот пример того, как можно представить себе размещение блоков div (или "книг") на веб-странице (или "полке"):

До выравнивания:         После выравнивания:
[📘][📗][📙]                [📘] [📗] [📙]
Набор книг.       Книги на полке в порядке.

Создание указанного выше порядка может выглядеть вот так:

.shelf {
  display: flex; /* Привлечем невидимую силу */
}
.book {
  flex: none; /* Каждая книга будет игнорировать эту силу */
}

И теперь, книги расположены в нужном порядке:

[📘] [📗] [📙]
# Кто сказал, что нужен библиотекарь, если есть CSS?

Floats: уходят в прошлое

Если вы по-прежнему используете свойство float, пришло время обновиться. Сегодня актуальны технологии flexbox и grid. Они не только эффективны, но и созданы для поддержания порядка в верстке:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Поведение элементов под контролем */
}

Семантика и производительность – путь к любви от Google

Секрет прост – Google предпочитает семантический HTML и страницы, которые загружаются молниеносно. Так что, следите за тем, чтобы изображения оставались аккуратными, а разметка – осмысленной.

Тестирование – прерогатива профессионала

Не забывайте, что стратегии реализации сайтов могут различаться. Тестируйте вашу верстку на различных браузерах и устройствах. Детальность и внимание к нюансам – вот что отличает профессионалов от новичков.

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

1. Полное руководство по Flexbox от CSS-Tricks – глубокое погружение в CSS Flexbox.
2. Основные концепции flexbox от MDN – простое и понятное объяснение основ Flexbox от Mozilla.
3. Полное руководство по CSS Grid от CSS-Tricks – все, что вам нужно знать о CSS Grid.
4. Руководство по CSS Grid Layout от MDN – подробное и доступное изложение о создании сеточных макетов в CSS.
5. Основы позиционирования CSS от A List Apart – прекрасный ресурс для тех, кто только начинает изучать позиционирование элементов.
6. CSS display: inline versus inline-block на Stack Overflow – обсуждение различий между способами отображения элементов.
7. Учебник по свойствам float и clear в CSS от W3Schools – понятное руководство по изучению свойств float и clear.