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