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

Thanks for the help guys, in the end i found the answer here

jQuery Set Height of Element to Highest in the group

Im now looploopign through the elements in question like so

// Set options
var height = 0;
var element_wrap = ".compare-items-wrapper";
var element_search = ".financial_annual_fees";

// Search through the elements set and see which is the highest.
jQuery(element_wrap).each(function () {
    jQuery(this).find(element_search).each(function () {
        if (height < jQuery(this).height()) height = jQuery(this).height();
    });

    //alert("Block Height: " +height);

    // Set the height for the element wrap.
    jQuery(element_search).css("height", (height+10) + "px");

    // Unset height
    height = 0;
});

Answer 2

制作外部 div 行和内部 div 列会更容易。那么当高度变化时，整行的高度就会增加。然后你可以给列的百分比或静态宽度。

Answer 3

如果您可以更改 html 的结构，使其包含许多行，每行包含两列，那么您可以使用 CSS 使用display: table;和来做到这一点display: table-cell。

HTML 需要是这样的：

<div id="wrapper">
    <div id="row1" class="row">
        <div class="column">
          text lots more text and more text
        </div>
        <div class="column">
          text lots more text and more text
        </div>
    </div>
    <div id="row2" class="row">
        <div class="column">
            text lots more text and more text
        </div>
        <div class="column">
            text lots more text and more text
        </div>
    </div>
    <div id="row3" class="row">
        <div class="column">
            text lots more text and more text
        </div>
        <div class="column">
            text
        </div>
    </div>
</div>

像这样的CSS：

.row {
    display: table;
}

.row .column {
    display: table-cell;
}

这是一个演示： http ://plnkr.co/edit/9Fj0y15FrjDJ7CQ00hzk?p=preview