假设我在HTML中有一些结构化内容 - 例如，段落中的文本分为几个部分。让我们说我有另一个相同结构的实例，我希望使用HTML和CSS将这两个内容并排显示为两列。怎么做？关键是我希望列内的相应元素（段落，部分）对齐，以便它们从相同的高度开始。
这种结构的示例可以是双语页面，或源代码以及行数或对各行的一些侧面评论。
我唯一的想法是使用表格，但我不确定它是最好的解决方案。我希望能够选择内容，就像列是普通网页一样，但是在表格中选择的方式是首先选择一行中的单元格。
一个例子如下。回想一下，我希望相应的元素从相同的高度开始。
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.main {
margin: auto;
width: 500px;
}
.column {
float: left;
width: 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
</div>
</body>
</html>
如果你希望每个部分/子部分以相同的高度开始，我建议这样做：
<div class="main">
<div class="row">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>This text might also be longer so you need to push the next section's as well to start at the same height</p>
</div>
</div>
</div>
与表格相同（几乎），但有div。
我不是“弹性盒”专家，所以这可能是一种方式，尽管浏览器支持较少。
如果您不能/不想使用“行”元素（并且不能/不能/不想要flex选项），您将需要一个遍历元素并计算要设置的边距的javascript片段。
UPDATE
检查这两个链接，它们将帮助您根据需要使用flex进行设置：
- https://chriswrightdesign.com/experiments/using-flexbox-today/#card-layout
- http://codepen.io/imohkay/pen/PwPwWd/
未使用javascript的未来证明方式。
更新2
这个有一些非常酷的网格解决方案：
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/
好吧，我不知道你到底想要什么...我想你可能想要两个并排的部分，你可以放置任何东西......这就是我找到的东西：
制作两个div <div id="first"> 和 <div id="second">
并把你想要的东西放在里面。现在css：
#first {float:left;width:50%;}
#second {float:right;width:50%;}
确保你有 body {padding:0; margin:0;}
如果我正确理解了您的问题，那么您正在搜索一个HTML结构，该结构显示彼此相邻的两个项目。该项目的每个属性（即子部分）应具有相同的高度。并且，当用户选择文本时，应该选择整行（即来自两个项目的相同属性）。
我觉得为了让用户能够按照你想要的方式选择内容，结构需要正确，因为我相信浏览器会根据结构选择内容（不确定，但这总是正确的） 。
问题是，如果您可以自由使用任何您喜欢的HTML结构？
当我尝试下面的例子时，它对我有用。解决方案是使用列表（ul 同 li）每个“财产”（行），制作 li显示为 inline-block。这样，他们就不会破坏，就像他们一样 block元素，它们每条“线”的高度始终相同。同 vertical-align: top; 所有内容都从元素的开头开始。
我调整了内容，所以我们肯定有不同的线高和包装，只是为了确保它有效。
造型：
<style>
ul {
list-style: none;
}
ul li {
display: inline-block;
vertical-align: top;
width: 20%;
}
</style>
HTML：
<ul>
<li>Section 1</li>
<li>Section 2<br/>(with new line)</li>
</ul>
<ul>
<li>Some text</li>
<li>The text translated to another language, which may be longer.<br /><br />
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer. </li>
</ul>
<ul>
<li>The text translated to another language, which may be longer.
The text translated to another language, which may be longer.</li>
<li>Some text</li>
</ul>
感谢LGSon，我已经了解了flex。我试图整理一个解决方案。以下代码以某种方式工作，但有一些问题：
- 必须为所有元素添加`order`属性。
- 由于某些原因，flex不会像在标准情况下那样重叠边距，因此所有垂直空间都更大。
- 很难知道例如在整列周围添加边框。
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: auto;
width: 500px;
display: flex;
flex-wrap: wrap;
}
.container > * {
flex: 0 0 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="container">
<h1 style="order: 1">Section</h1>
<p style="order: 2">Some text</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
<h1 style="order: 1">Section</h1>
<p style="order: 2">The text translated to another language, which may be longer.</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
</div>
</body>
</html>
使用CSS column-count CSS属性： https://css-tricks.com/almanac/properties/c/columns/
更新
重新阅读问题之后，我想如果你想让两个列都以相同的高度开始，你可以在两列上使用min-height，但要注意内容随后会随着它的增长而推高。
为了保持高度，即使有内容，放一个固定的高度然后适用 overflow-y:auto; 要么 overflow-y:scroll。这样，两个盒子将具有相同的高度，并且可以在内容增长的情况下滚动