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>的行换行时，它们将彼此偏移。

[一种明显的极端情况是，当两个<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>

Answer 2

这不是一个完整的解决方案，说实话，您的要求让我很忧虑，但我相信dd-tag和wbr-tag可能非常适合此任务。即使它并不总是有效，但...

<div>
            <dd>depending on the line above. <wbr>Something like a translation to this line.</dd>
            <dd>abhängig von der Zeile darüber. <wbr>So etwas wie eine Übersetzung zu dieser Zeile<dd>
</div>

...与Brett DeWoody的解决方案和CSS技能相结合/进行了实验，它应该可以为您完成工作。也许使用无序列表也可能对您有用：

<ul>
  <li class="tranlsationEng">depending on the line above. <wbr>Something like a translation to this line.</li>
  <li class="translationGer">abhängig von der Zeile darüber. <wbr>So etwas wie eine Übersetzung zu dieser Zeile</li>
</ul>