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

我有一些列（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解决了这个问题。

来源

2013-02-19 Adam K Dean

韩元这是否会甩掉基础的响应性？ – Jack 2013-02-19 21:15:12

好点，我需要一种方法来在尺寸通过断点时禁用它。 – 2013-02-19 21:18:30

对于它的价值 - 我不知道我是否看到jQuery答案发布为可接受的答案。如果用户禁用了JS，该怎么办？看起来像纯粹的CSS方法是“正确”的答案，而jQuery是最简单的方法。 – JM4 2013-09-05 20:20:54

经过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>

作品完美！

来源

2013-02-19 21:11:48

退房以下网站：

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

来源

2013-02-19 21:20:44 James

我看到这个链接，与基础一起使用太费力，需要使用背景来伪造列，或者更改结构。 – 2013-02-19 21:21:34

好的。我通常会发现css-tricks是一个很好的网站。我即将入睡，所以希望别人能拿出一个短一点的答案！祝你好运！ – James 2013-02-19 21:22:55

@AdamKDean这就是为什么它是一个非常好的主意，以显示你已经看到/尝试的问题作为你的问题的一部分：所以你没有得到包含你已经见过/试过的东西的答案。 – cimmanon 2013-02-19 21:41:18

，而无需修改标记，这将是去建立等高列的最简单的方法：

http://jsfiddle.net/Nu5KN/

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

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

来源

2013-02-19 21:39:57 cimmanon

虽然这通常起作用，但在基础上它似乎没有达到预期的效果。 – 2013-02-19 23:02:08

注意：'display：table-cell;'对于 TheCarver 2014-06-22 17:41:45

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

回答

相关问题