5

我正在尝试将成对的 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 有一个针线边框，所以当它们的高度不同时非常明显。'right class' 将项目向右浮动。我只希望这些对具有相同的高度，因为它们将形成一排。我不想使用表格（css 或其他），因为布局对于移动设备是动态的（它们形成单列）。

4

4 回答 4

8

您可以使用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));
});

示例小提琴

于 2013-10-17T10:10:53.260 回答
3

你可以试试这个（.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);
});

试用小提琴

于 2013-10-17T10:09:24.287 回答
2

工作演示 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);
    }
});
于 2013-10-17T10:09:43.997 回答
1

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

像这样 ：

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);
}               
});
于 2013-10-17T10:08:21.720 回答