Question

我正在尝试将配对的div设置为相同的高度。

<div class="item ">
Some text
</div>
<div class="item right">
Some text
</div>
<div class="item ">
Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item ">
Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text
</div>

CSS

.item{width: 45%;float: left;position: relative;border: 1px solid #000;clear:left;}
.item.right{float:right;clear:right;}

jQuery我正在使用

$('.item.right').prev().each(function() {
    leftheight = $(this).height();
    rightheight = $(this).next().height();      
    if(leftheight > rightheight){
        $(this).next().height(leftheight);
    }else{
        $(this).height(rightheight);
    }               
});

这似乎不起作用，我无法弄清楚原因。

我有两个列布局，其中div有一个引脚线边框，所以当它们的高度不同时非常明显。 '右侧'将项目向右浮动。我只希望这些对具有相同的高度，因为它们会形成一排。我不想使用表格（css或其他），因为布局对于移动设备是动态的（它们形成一个列）。

Answer 1

您可以使用map()将div左/右元素的高度设置为数组，然后使用数组Math.max获得最高，并使用该值他们都。试试这个：

$('.item.right').each(function() {
    var $divs = $(this).add($(this).prev('.item'));
    var tallestHeight = $divs.map(function(i, el) {
        return $(el).height();
    }).get();
    $divs.height(Math.max.apply(this, tallestHeight));
});

Example fiddle

Answer 2

您可以尝试使用此功能（ .map() and Math.max.apply() ）：

您必须在数组中获得高度并在数组中查找最大值，然后Math.max.apply()将应用数组中的最大值。

$(document).ready(function() {
   var heightArray = $(".item").map(function() {
        return  $(this).height();
   }).get();
   var maxHeight = Math.max.apply(Math, heightArray);
   $(".item").height(maxHeight);
});

Tryout the fiddle

Answer 3

工作演示 http://jsfiddle.net/nTFtn/ 或 http://jsfiddle.net/6tU2m/

这就是你要找的！

希望这有助于:)

<强>码

$('.item.right').prev('div').each(function () {

    leftheight = $(this).height();
    alert(leftheight);
    rightheight = $(this).next().height();
    if (leftheight > rightheight) {

        $(this).next().height(leftheight);
    } else {
        $(this).height(rightheight);
    }
});

Answer 4

您必须首先检索最大高度，然后将所有高度设置为此高度。

像这样：

var max_height = 0;
$('.item.right').prev().each(function() {
  if($(this).height() > max_height) {
     max_height = $(this).height();
  }
});
$('.item.right').prev().each(function() {
    $(this).height(max_height);
}

修改

错误发生在next()，因为您已经在正确的项目上，并且与next()进行了比较...请改用prev()！

$('.item.right').prev().each(function() { rightheight = $(this).height(); leftheight = $(this).prev().height(); if(rightheight > leftheight){ $(this).prev().height(rightheight); }else{ $(this).height(leftheight); } });

设置兄弟DIV相同的高度（最高）

4 个答案: