Блог

Есть панель навигации. Схематически это выглядит так:

 <- 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 пикселей.

вы могли бы попробовать flex-box для div, который оборачивает вашу навигацию:

 <div style={display: flex, flex-flow: row wrap}>
//nav items in here
</div>
  

Это указывает на то, что ваши элементы навигации всегда располагаются в строке, и если размер экрана меньше, это автоматически переносит элементы

Это происходит всегда, вы не можете остановить это, просто установив поля. Например, я добавил эти дополнительные точки в ваш код. Теперь проверьте свои фрагменты.

Первый фрагмент:

 <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>  

Вот как вы могли бы достичь этого результата, используя 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>  

Из MDN:

Верхние и нижние поля блоков иногда объединяются (сворачиваются) в единое поле, размер которого является наибольшим из отдельных полей (или только одного из них, если они равны), поведение, известное как сворачивание полей. Обратите внимание, что поля плавающих и абсолютно позиционированных элементов никогда не сворачиваются.

Я думаю, вам следует определить медиа-запрос, чтобы при необходимости добавлять верхние поля (например, на маленьком экране).

Предполагая, что вы присвоили этому правому div идентификатор «right-nav», вот демонстрационный код:

 @media only screen and (max-width: 600px) {
  #right-nav {
    margin-top: 15px
  }
}