Javascript 没有表格的页面上的并排翻译

我希望能够把一个文本和它的翻译并排放在一起，以这样的方式，原文和译文都是一个单一的文本运行（可以突出显示，用于复制粘贴等），但两个文本不会超过一行或两行不同步

这类事情通常是通过表格完成的——每种语言一列，每段、每节或每行一行。因此，问题在于，如果不抓住相邻列，就无法向下突出显示一列。此外，标记也会成为一场灾难

我想做的是让标记看起来像：

<div id="Pig-Latin">
  <p id="pl-1">Isthay isay inelay unway.</p>
  <p id="pl-2">Igpay Atinlay isay ardhay anguagelay.</p>
</div>

<div id="English">
  <p id="en-1">Translation of line one.</p>    
  <p id="en-2">Translation of line two.</p>
</div>

我总是不小心
Igpay-Atinlay是一个叫ardhay-anguagelay的人
第一行的翻译。

第二行的翻译

将这两种语言并排放在列中，并使用一些东西（我想是javascript）来确保en-1和pl-1对齐，等等

事实上——如果是不包装任何文本的标记会更好：

这是第一行….

（当然，如果有一些我不知道的html元素，在语义上会更合适…）

在较小的屏幕上，或者如果用户需要，可以单独显示一列或另一列

---

其他类似性质的问题已经给出了“使用表”的答案，我不想这样做——正如我所提到的。

在我看来，您的情况需要CSS而不是JavaScript。您可以使用以下基于div的HTML（因为您不想使用表，顺便说一句，这是一件好事）

---

此CSS将为每个主文本和您的翻译提供50%的行宽。如果您知道CSS中的float，请尝试为每列使用floating div，以便在用户缩小浏览器窗口时可以正确地将它们堆叠起来。

谢谢您的想法。但是这与使用表有着相同的问题。我不希望这两个文本在标记中来回地砸在一起。我希望每一篇文章都有一行，在并排的列中，内容的垂直位置发生变化，使平行线彼此相邻。到目前为止，我唯一的想法是将每一节诗放在一个

中，然后使用JS来比较每一对的高度，然后让两者中的较小者等于较大者。

<div class="row">
   <div class="main-col">  Some original text may be in English  </div>
   <div class="trans-col">  Translation comes in this div </div>
</div>

.row{
  width:100%;
}

.main-col{
   width:50%;
}
.trans-col{
   width:50%;
}