javascript - 没有表格的页面并排翻译

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 中的 float ，请尝试为每一列使用 float div，以便在用户缩小浏览器窗口时可以正确堆叠它们。