Верстка двух div рядом в CSS: адаптивность и 200px

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

Чтобы расположить блоки div рядом, используйте display: inline-block;. Настройте их ширины таким образом, чтобы их суммарный размер не вызывал перенос элементов:

<div style="display: inline-block; width: calc(50% – 10px);">Блок 1</div><!--
--><div style="display: inline-block; width: calc(50% – 10px);">Блок 2</div>

Убедитесь, что суммарная ширина блоков с учетом отступов, полей и границ не превышает 100%. HTML-комментарий <!-- --> помогает устранить нежелательные пробелы между элементами — хороший лайфхак!

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

Flexbox обеспечивает гибкость и удобство при адаптации:

<div style="display: flex;">
  <div style="flex: 1;">Блок 1</div>
  <div style="flex: 0 0 200px;">Блок 2</div>
</div>

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

Надёжная обтекаемость

Если работаете со старыми браузерами, примените float для обеспечения совместимости:

<div style="float: left; width: calc(100% – 210px);">Блок 1</div>
<div style="float: right; width: 200px;">Блок 2</div>

Первый блок прижимается к левому краю, второй блок – к правому. Функция calc обеспечивает точный расчёт ширины, избегающий перекрытия и оставляющий зазор между блоками.

Внимание на отзывчивость

Отзывчивость — ключевой элемент современных веб-макетов:

@media (max-width: 600px) {
  div {
    float: none;
    width: auto;
  }
}

Этот медиа-запрос гарантирует корректное отображение блоков div на малых экранах, расставляя их в вертикальном порядке и предотвращая конфликты при отображении.

Завершение

Визуализируйте два блока как двух лошадей, стоящих вместе:

| До CSS           | После применения CSS с `float` или `flexbox` |
| ----------------- | ------------------------------------ |
| 🐴[Блок 1] Один   | 🐴[Блок 1] и 🐎[Блок 2] стоят рядом  |
| 🐎[Блок 2] Один   |                                      |

При использовании метода Float, блоки выстраиваются рядом, подобно лошадям, которые сразу отображаются в браузере.

Метод Flexbox трансформирует браузер в гибкое пространство, позволяя элементам div занимать оптимальное положение рядом.

В итоге? Два блока, словно две лошади, спокойно расположены рядом и готовы устремиться вперёд совместно.

Когда обтекание не подходит

Для лучшей структурированности размещайте блоки div в общем контейнере:

<div style="display: flex; flex-wrap: wrap;">
  <!-- Responsive container -->
  <div style="flex-grow: 1; flex-basis: calc(100% – 210px);">Блок 1</div>
  <div style="flex-grow: 0; flex-basis: 200px;">Блок 2</div>
</div>

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

Идеальное позиционирование

Для идеального расположения двух блоков используйте абсолютное позиционирование:

.parent {
  position: relative;
}
.child {
  position: absolute;
  right: 0;
}

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

Динамичные дуэты

Применяйте функцию calc() для динамичных расчётов размеров:

.left {
  width: calc(100% – 210px); /* Автоматически адаптируется под ширину правого блока div */
}
.right {
  width: 200px;
}

Фиксированная ширина правого блока div коррелирует с адаптивной шириной левого блока div, создавая идеальное сочетание, наподобие стейка с лобстером.

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

1. Полное руководство по Flexbox | CSS-Tricks — помощник в создании гибких и адаптивных макетов.
2. CSS Grid | MDN — освойте искусство расположения элементов рядом с помощью CSS Grid.
3. Загадка свойства float в CSS — Smashing Magazine — детальный разбор обтекания блоков div.
4. Отзывчивый веб-дизайн с медиа-запросами | w3schools — прокачайте навыки адаптивной верстки с помощью медиа-запросов.
5. Позиционирование в CSS | MDN — поймите любые тонкости позиционирования блоков.
6. Flexbox Froggy — игра и увлекательный способ изучения CSS Flexbox.
7. Центрирование элементов в CSS: Полное руководство | CSS-Tricks — всё, что нужно знать о центрировании элементов!