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

制作外部divs行和内部divs列会更容易。然后当高度改变时，整行将增加高度。然后，您可以为列提供百分比或静态宽度。

Answer 2

如果您可以更改html的结构，使其分别包含两列，那么您可以使用display: table;和display: table-cell对CSS执行此操作。

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

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

在HTML中对齐一组彼此不相邻的元素

3 个答案: