对齐 HTML 中不相邻的一组元素答案

【问题标题】：Align a set of elements that are not next to each other in the HTML对齐 HTML 中不相邻的一组元素
【发布时间】：2017-07-31 20:25:52
【问题描述】：

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

<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 结构。

【问题讨论】：

标签： jquery css alignment css-tables

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您可以更改 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

【讨论】：

谢谢，但应该提到我无法更改 HTML

【解决方案3】：

感谢大家的帮助，最后我在这里找到了答案

jQuery Set Height of Element to Highest in the group

我现在像这样循环遍历有问题的元素

// 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;
});

【讨论】：