Похожие записи:
- Код для платформы продаж автомобилей, разработанный с помощью flexbox в HTML5
- Ajax, json, jquery — не добавляется товар в корзине!
- Возможно ли последовательно открывать разные модальные окна кликом по одной и той же ссылке?
- Шаговый модуль оформления заказа Vue.js
- Система анимированного меню — мобильная и десктопная
Айратиус
Всем добра. Всегда решал проблему, но криво. Решил докопаться до истины. Поясню на примере.
В результате получается что рамка .main не становится вокруг .block (визуально)
Как делать правильно, чтобы визуально выглядело корректно?
Я же использую для .main display:flex; Какие будут варианты?
Gerga
Я же использую для .main display:flex;
Вы не используете display:flex.
Какие будут варианты?
как вариант, использовать display: flex ☝ или очистить float (clear: both, именно так делалось в допотопных до недавних времен).
———- Добавлено 14.06.2020 в 22:30 ———-
Пример 1:
Пример 2:
ziliboba0213
clear both, если я верно понял 🙂
Sitealert
Решил докопаться до истины.
В результате получается что рамка .main не становится вокруг .block (визуально)
Потому что при float на высоту родительского блока не влияют дочерние элементы.
Варианты решения:
— задать высоту .main
— использовать clear: both
— использовать flex
— использовать для дочерних элементов display:inline-block (есть нюансы).