jquery - 对齐 HTML 中不相邻的一组元素

Question

我正在创建一个比较表，其中的列构建如下:

<div id = "wrapper">

<div id = "col1">
<div class = "row1">
 text
 lots more text
 and more text
</div>
<div class = "row2">
 text
</div>
<div class = "row3">
 text
</div>
</div>

<div id = "col2">
<div class = "row1">
  text
</div>
<div class = "row2">
  a  
  lot
  of

  text
</div>
<div class = "row3">
  text
</div>
</div>

</div>

然后，Col1 和 col2 显示为 inline-block，因此它们在页面上视觉上并排放置。

问题是每行的内容可能不同。如果不设置每一行的最小高度，我如何确保每一行在视觉上与另一列中的相应行对齐？

我想不出有什么方法可以单独在 CSS 中实现这一点。我想知道是否有一些偷偷摸摸的 jQuery 方法可以实现这一点？

编辑:我无法更改 HTML 结构。

Answer 1

制作外部 div 行和内部 div 列会更容易。那么当高度发生变化时，整行的高度都会增加。然后您可以为列指定百分比或静态宽度。