使用JQuery的相等高度列

我们可以使用JQuery来创建相等高度的列吗？ 如果有，怎么样？

谢谢

Answer 1

循环遍历每一列，找到最高的。 然后将所有设置为该高度。

var maxHeight = 0; $(".column").each(function(){ maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; }).height(maxHeight);​ 

在线演示： http ： //jsbin.com/afupe/2/edit

Answer 2

强烈推荐可链接的插件方法。 因为这可以重复使用……你可以使该系列的equalHeights具体化……

 $.fn.equalHeights = function () { var max = 0; return this .each(function(){ var height = $(this).height(); max = height > max ? height : max; }) .height(max); }; // don't combine collections unless you want everything same height.. $('.top-menu a').equalHeight(); $('footer a').equalHeight(); 

您可以更进一步，使高度成为您接受的属性，这样您就可以使用高度或宽度……

 $.fn.equalProp = function (prop) { var max = 0; return this .each(function(){ var oProp = $(this)[prop](); max = oProp > max ? oProp : max; }) [prop](max); }; $('.top-menu a, .top-menu div').equalProp('height').equalProp('width'); 

Answer 3

我几天前发布了一个类似的问题，这里有一段对我有用的代码。

*** #column_left，＃column_center，＃column_right：应该具有相同高度的三列div。 我想它可以使用更多或更少数量的列。

它由用户“widyakumara”发布。 我希望它也能帮到你。

Answer 4

@ktsixit你应该为所有列提供一个类，而不是在这种情况下使用唯一ID。 然后，您可以一次计算并将最高高度应用于所有项目。 即使您没有或不能使用类，您至少应该使用变量来存储div ID引用。 使用上面的代码，您将解析DOM 6次。 您至少可以通过使用变量将其减少为3次解析。