Question

如果我有以下标记;

<div id="container">
  <div id="box">
    <div id='sameHeight'>One<br>two<br>three</div>
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>five</div>        
  <div>
  <div id="box">
    <div id='sameHeight'>four</div>
    <div id='sameHeight'>six</div>
    <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

我如何确保标记为“sameHeight”的所有div与其他div中的对应物的高度相同？

我看了一下equalHeights插件，但是假设并排的所有div都在同一个父级中。我需要一个可以遍历父母或允许我指定父母的人。

有这样的事情还是我需要写它？

修改

我似乎在我的解释中引起了一些混乱，所以我希望这会让事情变得清晰。

查看新标记，容器是一个简单的框。

“盒子”divs并排坐着。

然后每个sameheight div在其父级中位于另一个之下。

我试图解决的问题是让每一个与它相对的高度匹配的相同高度。

它应该看起来像一个网格，我猜不会使用网格。

我希望这会有所帮助。

编辑2

到目前为止，我想出的是有更好的方法吗？

function SetHeights() {
    var numLines = $('#container>div:eq(0) .sameHeight').length;

    for (var t = 0; t < numLines; t++) {
        var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight();
        var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight();

        if (leftHeight > rightHeight) {
            $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight });
        }
        else {
            $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight });
        }
    }
}

Answer 1

首先，您可能知道只有一个元素应该具有任何一个id属性。所以我已经改变了选择器，好像它们是下面的类的类。即使你可能不关心W3C标准，浏览器或JavaScript API等也可能依赖于这种行为而现在或将来都无法工作。

   $(document).ready(function () {    
        $('div.parentDiv > div').each(function() {

        var $sameHeightChildren = $(this).find('.sameHeight');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });


    });
});

注意：如果你希望它们的父级div都是相同的高度，这就是你想要的。

$(document).ready(function () {    
        var $sameHeightDivs = $('.sameHeight');
        var maxHeight = 0;
        $sameHeightDivs.each(function() {

            maxHeight = Math.max(maxHeight, $(this).outerHeight());

        });

        $sameHeightDivs.css({ height: maxHeight + 'px' });
});

这会将它们设置为最高的每个父div元素的高度。

此外，this answer可能会向您显示其他一些选项。

另请注意，如果内部内容再次发生变化（可能是通过JavaScript），则需要再次调用此内容，或将其置于{<1}}中，不推荐。< / p>

Answer 2

<div id='parentDiv'>
  <div>
      <div id='sameHeight'>One<br>two<br>three</div>
      <div id='sameHeight'>four</div>
      <div id='sameHeight'>five</div>        
  <div>
  <div>
      <div id='sameHeight'>four</div>
      <div id='sameHeight'>six</div>
      <div id='sameHeight'>seven<br>eight</div>
  <div>
</div>

并在JavaScript中使用jQuery写：

$(document).ready(function () {    
    $("div.parentDiv div div.sameHeight").css({ height: "100px" });
});

Answer 3

为什么不只使用一张桌子？

Imho，在这样的javascript中进行布局比通过表格进行布局更加邪恶。如果用户调整浏览器大小会怎样？您必须捕获调整大小事件，但是在调整大小时会出现一定的滞后现象，这会使您的网站看起来不合适。

jQuery Equal Height Divs

3 个答案: