设置兄弟DIV相同的高度(最高)

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

示例小提琴