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

Question

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

我正在使用Zurb基金会，所以布局是这样的，我不能把div s放在其他人身上来伸展他们。

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