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元素我不知道那会更符合语义......）

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

其他类似性质的问题已经产生了＆＃34;使用表格＆＃34;回答，我不想做 - 就像我提到的那样。

Answer 1

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

<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，那么当用户缩小浏览器窗口时你可以正确地堆叠它们。

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

1 个答案: