Блог

Как заставить плавающие элементы перестать плавать при переполнении? Я пытаюсь создать что-то вроде этого:

Когда браузер полностью развернут, два элемента должны выстраиваться следующим образом:

 |span|                                  |span|
 

Но когда браузер изменяет размер до точки, где элементы касаются, это должно произойти:

 |span|
|span|
 

Я пытался сделать это с плавающим, как:

 <div class="border px-3">
   <span>December 6th, 2020</span>
   <span class="float-right">This is some example text right here</span>
</div>
 

Но когда я изменяю размер, я получаю

 |span|
           |span|
 

Это то, что вы хотите, но с использованием flex правил. И точно:

display: flex — устанавливает гибкость;

justify-content: space-between — равномерно распределяет блоки по всему свободному пространству;

flex-wrap: wrap — устанавливает передачу блоков при сужении окна браузера.

 .border {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
} 

 <div class="border px-3">
   <span>December 6th, 2020</span>
   <span>This is some example text right here</span>
</div> 

Вы можете использовать некоторые свойства flexbox,

 .my-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.first{
    flex: 1 0 auto;
}
.second{
    flex: 0 0 auto;
}
 

Соответствующий HTML-код

 <div class="my-container">
    <span class="first">December 6th, 2020</span>
    <span class="second">There is some example text here</span>
</div>