我正在寻找一种有效的方法，在两栏网站中大规模对齐大型双语文本的段落。我的文件很长。该网页将有两个栏，每个栏占页面的50%。第一列将有英文文档；第二列将具有相同的德语文档。每个段落之间都需要有一行空白，每个段落的第一行必须与另一种语言的相应段落对齐。
我已经制定了一种将段落样式设置为方框的方法，使用以下作为我所做的示例：
第一段的HTML(用于英语和德语(：
<div id="box1">
I.
<br>
<p>THE SCIENTIFIC LITERATURE ON THE
PROBLEMS OF THE DREAM
</p>
</div>
第一段CSS(用于英语和德语(
#box 1 {
height: 175px;
padding: 0px;
border: 0px;
margin: 0px;
background: #162e2e;
}
由于框的指定高度，上述解决方案将很好地对齐段落。我对相应的段落使用相同的高度，因此这些段落占用的空间完全相同，然而，这很难按比例进行。这将需要单独校准文件的每一段。有没有其他在规模上有效的方法来做到这一点？
您可以将每个段落放在单独的div中，比如说paragraph。
<div class="paragraph">
...
<div>
每个div将有两个孩子，一个用于英语文本，另一个用于德语文本。我们可以把display: flex应用于这个div，这样段落就并排了。
<div class="paragraph" style="display: flex">
<p>English Text</p>
<p>German Text</p>
</div>
然后对于子级，我们可以应用flex: 1 1 50%，这意味着每个子级将具有50%的宽度，并且将以相等的比例使用grow和shrink。
<div class="paragraph" style="display: flex">
<p style="flex: 1 1 50%">English Text</p>
<p style="flex: 1 1 50%">German Text</p>
</div>
将HTML和CSS分离，我们得到：
.paragraph {
display: flex;
}
.paragraph > p {
flex: 1 1 50%;
border: 1px solid black;
}<div class="content">
<div class="paragraph">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no. Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no.</p>
</div>
<div class="paragraph">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no</p>
<p>Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no. Deutsches Ipsum Dolor id latine Wiener Schnitzel complectitur pri, mea meliore denique Wurst id. Elitr expetenda nam an, Bier ei reque euismod assentior. Odio Currywurst iracundia ex pri. Ut vel Bretzel mandamus, quas natum adversarium ei Wiener Schnitzel diam minim honestatis eum no.</p>
</div>
</div>希望这能满足你的需求！。
编辑：添加边框以查看两个文本之间的区别。