如何用CSS让文本位于两个浮动span下方而非中间（无需额外容器）

如何在不额外包裹两个<span>标签，也不单独包裹“Lorem ipsum...”文本的前提下，用CSS让这段文本从两个粉色<span>标签的下方开始，而非夹在它们中间？

初始代码 #

HTML #

<div class="container">
  <span class="left">LEFT</span>
  <span class="right">RIGHT</span>
  Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit
</div>

CSS #

.container {overflow:auto}
.left  {float:left; background-color:pink}
.right {float:right; background-color:pink}

解决方案 #

方法1：Flex布局（推荐） #

改用Flex布局可以轻松实现需求，无需修改HTML结构：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: auto; /* 保留原容器的overflow属性 */
}
.left, .right {
  background-color: pink;
}

原理：Flex容器开启flex-wrap: wrap后，子元素会在一行放不下时自动换行。两个<span>作为flex项，通过justify-content: space-between实现左右对齐，匿名的文本内容会自动成为新的flex项，占据第二行的全部宽度。

方法2：Grid布局 #

使用Grid布局也能实现需求，无需修改HTML：

.container {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  overflow: auto;
}
.left, .right {
  background-color: pink;
}

原理：Grid容器定义两列，两个<span>分别占据左右两列，匿名文本内容会自动进入新的一行，默认横跨所有列，自然位于两个<span>的下方。

内容的提问来源于stack exchange，提问作者JPM