html - CSS 中两个 div 容器的交替换行符

Question

如果我在 div 容器中有一些文本，我会根据容器的大小自动换行。我想为两个 div 容器自动换行，但顺序交替。在图片上你可以看到我想根据 html 代码得到什么。我不关注交替的颜色。我标记了背景颜色，以便更好地理解我正在寻找的内容。

因为我想拥有很长且不同的内容，所以我不想用很多容器手工完成。另一个问题是当我这样做时不灵活。我希望它与灵活的周围容器尺寸一起使用。

有没有办法用 CSS 或任何其他方式来实现它？

<div id="surrounding_container">
  <div id="box1">
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quasi doloum ..  
  </div>
  <div id="box2">
    3.1415926535 8979323846 2643383279 5028841971 69399375105820974944 5923078164 0628620899 …     
  </div>
</div>

我试图更详细地解释这个问题。

Answer 1

这里可能有大量的边缘情况需要测试，但这里有一种方法。使用 2 <p>行高约为正常值 2 倍的标签。定位第二 <p>绝对如此，它位于第一行之间的空间 <p> .作为每个<p>的行环绕它们将相互抵消。

明显的边缘情况之一是当 2 <p> 的文本时标签完全不同 - 越长 <p>将有很多额外的行距宽的文本。所以这真的只适用于 2 <p>元素具有相似的文本长度。

html {
  font-size: 16px;
}

div {
  position: relative;
}

p {
  font-size: 1rem;
  line-height: 3rem;
  padding: 0;
  margin: 0;
  color: red;
}

p:nth-child(2) {
  position: absolute;
  top: 1.5rem;
  color: blue;
}

<div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>