jquery - 如何将所有列设置为相同的高度？

Question

我有一些列（divs），我想一直保持相同的高度。

我用的是Zurb Foundation所以布局是这样的，我不能把divs放在别人里面来拉伸它们。

<div class="row equalheight">
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
    <div class="three columns"> ... </div>
</div>

使用 CSS 可能并不容易，但我怎样才能使所有列自动等于相同的高度？

设法使用jquery解决了这个问题，解决方案如下。

Answer 1

片刻之后自己设法想出了答案eureka!，并认为我会为了社区的利益而分享。

我使用jquery循环遍历每个children元素，将最大大小保存在变量中，然后将该大小设置为所有子元素。

我将函数绑定到窗口load和resize事件。

<script>
function equalheight() {    
    $('.equalheight').each(function(index) {
        var maxHeight = 0;
        $(this).children().each(function(index) {
            if($(this).height() > maxHeight) 
                maxHeight = $(this).height();
        });
        $(this).children().height(maxHeight);
    });    
}

$(window).bind("load", equalheight);
$(window).bind("resize", equalheight);
</script> 

完美运行！

Answer 2

查看以下网站：

http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

在不修改标记的情况下，这将是创建等高列的最简单方法：

http://jsfiddle.net/Nu5KN/

div.equalheight {
    display: table;
    width: 100%; /* optional */
}

div.equalheight .columns {
    display: table-cell;
}