#html #css
#HTML #css
Вопрос:
Есть панель навигации. Схематически это выглядит так:
<- LEFT RIGHT ->
CSS:
<div style="margin-top: 25px">
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
</div>
Это работает нормально, если оба элемента навигации находятся в одной строке. Теперь, если экран слишком узкий или текст длинный, браузер изменяет его:
<- LEFT
RIGHT ->
или
<- LEFT LONG TEXT LONG TEXT
LONG TEXT LONG TEXT
RIGHT ->
И оба элемента становятся слишком близко друг к другу (по вертикали). Введение margin-top решает проблему для последующего случая:
<div style="margin-top: 35px">
<div style="float: left">LEFT</div>
<div style="float: right; margin-top: 15px">RIGHT</div>
</div>
Но это создает дополнительное поле для первого:
| 25px << outer margin
| 15px << inner margin
<- LEFT RIGHT ->
Вопрос Как заставить это работать в обоих случаях?
Подводя итог:
- верхнее поле (считая от самого верхнего элемента навигации) всегда равно 25 пикселям;
- если элементы навигации находятся в разных строках, между ними остается расстояние в 15 пикселей.
Комментарии:
1. как насчет использования flex-box?
2. @wyfy Было бы неплохо, если бы вы могли поделиться гибким решением проблемы.
Ответ №1:
вы могли бы попробовать flex-box для div, который оборачивает вашу навигацию:
<div style={display: flex, flex-flow: row wrap}>
//nav items in here
</div>
Это указывает на то, что ваши элементы навигации всегда располагаются в строке, и если размер экрана меньше, это автоматически переносит элементы
Ответ №2:
Это происходит всегда, вы не можете остановить это, просто установив поля. Например, я добавил эти дополнительные точки в ваш код. Теперь проверьте свои фрагменты.
Первый фрагмент:
<div style="margin-top: 25px;">
<div style="float: left">LEFT.............</div>
<div style="float: right">RIGHT.............</div>
</div>
Второй фрагмент:
<div style="margin-top: 35px">
<div style="float: left">LEFT.............</div>
<div style="float: right; margin-top: 15px">RIGHT.............</div>
</div>
Я думаю, что лучший способ — установить use flex-box:
<div style="margin-top: 25px; display: flex;">
<div style="float: left">LEFT.............</div>
<div style="float: right">RIGHT.............</div>
</div>
Если вы хотите добавить код, специфичный для маленького экрана (мобильного или для просмотра), вы можете использовать следующий фрагмент:
@media only screen and (max-width: 600px) {
#div_right {
margin-top: 15px
}
}
<div style="margin-top: 25px;">
<div style="float: left">LEFT.............</div>
<div id="div_right" style="float: right">RIGHT.............</div>
</div>
Комментарии:
1. Спасибо. Но (1) введение flex отменяет выравнивание по правому краю в третьем фрагменте (2) поля следует добавлять тогда и только тогда, когда элементы размещаются на последующих строках (это может произойти, если экран маленький или текст слишком длинный).
Ответ №3:
Вот как вы могли бы достичь этого результата, используя flexbox
, сожмите экран, чтобы увидеть разрыв в 15 пикселей между 2 строками.
.container {
border: 1px solid black;
margin-top: 25px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-around;
row-gap: 15px;
}
<div class="container">
<div class="left">LEFT</div>
<div class="right">RIGHTTTTTTTTTTT</div>
</div>
Ответ №4:
Верхние и нижние поля блоков иногда объединяются (сворачиваются) в единое поле, размер которого является наибольшим из отдельных полей (или только одного из них, если они равны), поведение, известное как сворачивание полей. Обратите внимание, что поля плавающих и абсолютно позиционированных элементов никогда не сворачиваются.
Я думаю, вам следует определить медиа-запрос, чтобы при необходимости добавлять верхние поля (например, на маленьком экране).
Предполагая, что вы присвоили этому правому div идентификатор «right-nav», вот демонстрационный код:
@media only screen and (max-width: 600px) {
#right-nav {
margin-top: 15px
}
}
Комментарии:
1. Не универсальное решение. Для длинных навигационных текстов это может произойти на больших экранах.
2. В вашем бизнес-примере когда-нибудь случалось иметь длинные тексты динамической навигации или это просто исправлено? Иногда я думаю, что вам нужно рассматривать свой бизнес скорее как идеальное универсальное решение. Кстати, я мог бы придумать решение с использованием flexbox, я опубликую его позже.