Question

我们可以使用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。我想它可以使用更多或更少数量的列。

<script type='text/javascript'
 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script type='text/javascript'>
$(document).ready(function() {

    // get the heights
    l = $('#column_left').height();
    r = $('#column_right').height();
    c = $('#column_center').height();

    // get maximum heights of all columns
    h = Math.max(c, Math.max(l, r));

    // apply it
    $('#column_left').height(h);
    $('#column_right').height(h);
    $('#column_center').height(h);
    });
</script>

由用户“widyakumara”发布。我希望它对你也有所帮助。

Answer 4

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

使用JQuery的相等高度列

4 个答案: