html - CSS制作一个通常向右浮动的元素，当视口太小时转到新行

Question

我在一个容器中有 2 个元素可以正确地粘在左右边缘：

https://jsfiddle.net/jamesjsfiddle/n3ta0Lro/1/

html:

<div class="subsectionTitle">
  <div class="subsectionTitle__title">This is my title! It could potentially be very long.</div>
  <div class="subsectionTitle__date">Start date and end date</div>
</div>

CSS：

.subsectionTitle{
    font-weight: 700;
    position: relative;
}

.subsectionTitle__title{
    display: inline-block
}

.subsectionTitle__date{
    float: right;

}

但是当视口变得太小时，输出看起来像这样：

当视口太小时，我试图让它看起来像这样：

为了实现这一目标，我可以做出哪些明智的改变？Javascript也可以。

标签： htmlcss

Answer 1

这可以通过将display: flex属性应用flex-wrap: wrap到justify-content: space-bewtween父级来实现。无需设置媒体查询！;)

.subsectionTitle{
    font-weight: 700;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

<div class="subsectionTitle">
  <div class="subsectionTitle__title">This is my title! It could be very long.</div>
  <div class="subsectionTitle__date">December 2020 - July 2020</div>
</div>