Question

好的，我有以下布局：

<div class="double_column_left">
    //Left responsive content
</div>
<div class="double_column_right">
    //Right responsive content
</div>

<div class="double_column_left">
    //More left responsive content
</div>
<div class="double_column_right">
    //More right responsive content
</div>

我需要的是每组列的高度（每个列的左右相邻）是相同的值。因此，如果左边比右边高，它会在Javascript中将右列设置为左边的高度，反之亦然。

这似乎是在Javascript / jQuery中轻松完成的事情，以某种方式循环遍历页面并根据每次调整页面时它们遇到的顺序匹配每组div;但我以前从来没有真正做过这样的事情，也无法想到如何去做。

有什么想法吗？

Answer 1

试试这个

$('.double_column_right').height(function () {
    return $(this).prev().height();
});

Answer 2

尝试这个有效的解决方案：

检索一个div的高度＆＃39; .double_column_right＆＃39;并将其应用于另一个div（＆＃39; .double_column_left＆＃39;）的最小高度。使用以下JQuery代码：

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

Answer 3

这应该有效：

function resizeColumns() {
    var $leftColumns = $('.double_column_left');
    $leftColumns.each(function() {
        var $leftCol = $(this);
        var $rightCol = $leftCol.next('.double_column_right');
        var height = Math.max($leftCol.height(), $rightCol.height());
        $leftCol.add($rightCol).height(height);
    });
 }

现在，只需在调整列大小时调用此函数即可。特别是在页面加载和窗口大小改变时：

 $(document).ready(resizeColumns);
 $(window).on('resize', resizeColumns);

Answer 4

这将使所有列左侧都等于所有列权限：

<强> JQUERY

var col1 = $(".double_column_left").height(),
    col2 = $(".double_column_right").height();
if (col1 > col2) {$(".double_column_right").height(col1); } else {
    $(".double_column_left").height(col2);
}

http://jsfiddle.net/qExTz/

如何根据旁边的div类设置div高度？

4 个答案: