溢出时向右浮动

Question

如何让浮动元素在溢出时停止浮动？我想拥有这样的东西：

当浏览器完全最大化时，这两个元素将像这样排列：

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

Answer 1

这就是您想要的，但使用 flex 规则。确切地说：

display: flex - 设置灵活性；

justify-content: space-between - 在整个免费 space;

中均匀分配块

flex-wrap: wrap - 设置缩小浏览器时块的传输 window.

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

Answer 2

您可以使用一些 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>

Float Right break on overflow