jQuery Equal Height Divs
如果我有以下标记;
One
two
three four five four six seven
eight
如何确保标记为“sameHeight”的所有div与其他div中的对应高度相同？
我看了一下equalHeights插件，但是假设并排的所有div都在同一个父节点中。 我需要一个可以遍历父母或允许我指定父母的人。
有这样的事情还是我需要写呢？
编辑
我似乎在我的解释中引起了一些混乱，所以我希望这可以解决一些问题。
看一下新标记，容器就是一个简单的盒子。
“盒子”divs并排坐着。
然后每个sameheight div在其父级中位于另一个之下。
我试图解决的问题是让每个相同的高度匹配它的相对高度。
它应该看起来像一个网格，我猜不会使用网格。
我希望这有帮助。
编辑2
到目前为止，我想出的是有更好的方法吗？
function SetHeights() { var numLines = $('#container>div:eq(0) .sameHeight').length; for (var t = 0; t 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 }); } } }
首先，您可能知道只有一个元素应该具有任何一个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元素的最高高度。
此外， 这个答案可能会显示一些其他选项。
另请注意，如果内部内容再次更改（可能通过JavaScript），则需要再次调用它，或者将其放在我不建议的setInterval()中。
One
two
three four five four six seven
eight
并在JavaScript中使用jQuery编写：
$(document).ready(function () { $("div.parentDiv div div.sameHeight").css({ height: "100px" }); });
为什么不用一张桌子？
Imho，像这样在javascript中进行布局比通过表格进行布局更加邪恶。 如果用户调整浏览器大小会怎样？ 您必须捕获resize事件，但是在resize时会出现一定的滞后性，这会使您的网站看起来无法完成。