Question

我有一些列（div s），我希望它们始终保持相同的高度。

我正在使用Zurb Foundation，所以布局是这样的，我不能把div放在其他人的范围内来拉伸它们。

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

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

3 个答案: