html - 使用 css 或 html 将行绑定(bind)在一起

Question

我希望将 2 条线绑定(bind)在一起，无论查看设备的宽度如何。

原因是 line2 总是解释 line1 等。它们必须响应式绑定(bind)，这意味着如果屏幕宽度发生变化，它们仍然必须绑定(bind)。

也可以按单词绑定(bind)，这意味着第一行和第二行单词始终位于彼此下方(以这两个单词的最长宽度为中心)。

已更新

有没有css/html的解决方案？

#container div:nth-child(odd){
    background-color: gray;color:white;
}

<div id="container">
<div>This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.</div>
<div>This line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter what</div>
<div>This line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main content.</div>
<div>This line is bound and explains content of line 1.This line is bound and explains content of line 1.This line is bound and explains content of line 1.</div>
  
  </div>

为了明确起见:当您运行上面的代码片段时。第 1 行呈现为彼此相邻的两行。

我希望它始终是 Div1 的 1 行和 Div2 的下一行。

所以它应该看起来像这样:

This is my text, it tells a story about a cat which was 
这是我的文字，它讲述了一个故事一只猫是什么哪
always angry and attacked even humans. One day the cat 
总是生气，甚至攻击人类。有一天，猫

第一行是英文文本，下一行始终是翻译文本。由于线条的宽度不同，因此很难使其响应。

有什么办法吗

Answer 1

我相信这就是你想要的。

将鼠标悬停在容器上可以看到它改变宽度。

有几个技巧，但主要思想是并排 float 两个元素，增加线宽，然后通过变换使它们重叠。

由于每个div只占容器宽度的一半，因此将容器设置为宽度200%以恢复表观宽度

#container {
  width: 200%;
  transition: width 15s;
}

#container:hover {
  width: 100%;  
}

#container div:nth-child(odd){
  background-color: gray;
  color:white;
  position: relative;
  float: left;
  clear: both;
  margin-right: -50%;
  margin-top: 1em;
  padding-bottom: 1em;
}

#container div:nth-child(even){
  position: relative;
  top: 2.1em;
  float: right;
  transform: translateX(-100%);
}

#container div {
  line-height: 2.2em;  
  width: 50%;
}

<div id="container">
<div>This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.This is line 1 text, we assume responsiveness.</div>
<div>This line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter whatThis line is bound to line1 no matter what</div>
<div>This line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main contentThis line is the main content.</div>
<div>This line is bound and explains content of line 2.This line is bound and explains content of line 1.This line is bound and explains content of line 1.</div>
  
  </div>