Как заставить плавающие элементы перестать плавать при переполнении? Я пытаюсь иметь что-то вроде этого:
Когда браузер полностью развернут, два элемента должны располагаться следующим образом:
|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|
@sergeykuznetsov как?
Это то, что вы хотите, но с использованием 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>
То, что вы хотите, может быть сделано с помощью flex. Никаких плавающих правил.