Float Right break при переполнении

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

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

|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. Никаких плавающих правил.

s.kuznetsov 21.12.2020 04:56

@sergeykuznetsov как?

Bubinga 21.12.2020 05:16
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
2
251
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это то, что вы хотите, но с использованием 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>

Другие вопросы по теме