不带表的页面上的并排翻译

Question

我希望能够将一个文本和它的翻译并排放在一起，这样，原始文本和翻译文本都是单一的文本(可以突出显示，用于复制-粘贴等)，但两个文本不会超过一到两行不同步。

这类事情通常是通过表格来完成的-每种语言对应一列，每段、诗句或行对应一行。那么，问题是你不能在不抓取相邻列的情况下突出显示下一列。此外，标记也会成为一场灾难。

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

<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>

将这两种语言并排放在一起，并使用一些东西(我想是javascript)来确保en-1和pl-1排成一行，等等……

实际上--如果标记没有包装任何文本，那就更好了：

<a id="en-1"></a> This is line one.... (如果有一些我不知道的html元素，在语义上会更合适……)

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

其他类似性质的问题也产生了“使用表格”的答案，我不想这样做-正如我提到的那样。

Answer 1

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

<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>

据说，您可以对每一行使用此HTML。

在CSS中，您将有3个类

.row{
  width:100%;
}

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

此CSS将给每个正文和您的翻译提供50%的行宽。如果您知道CSS中的浮动，请尝试对每一列使用浮动div，这样当用户缩小浏览器窗口时，您可以正确地堆叠它们。