我需要在另一个div包装器内的一系列div上设置相等的高度.问题是我不希望所有这些都有相同的高度.页面类型有3列,浮动div可以是1,2或3列宽. div向左浮动,所以下面的例子将在我的包装器中给我三行div.如何在同一行的div上设置相等的高度?在我的例子中,我希望nr 1和2具有相同的高度,3,4和5具有相同的高度?我事先不知道有多少div或者它们有多宽.编辑:它们可以是300,600或900像素宽,页面宽度为900像素
<div id="wrapper"> <div class="one-wide">nr1</div> <div class="two-wide">nr2</div> <div class="one-wide">nr3</div> <div class="one-wide">nr4</div> <div class="one-wide">nr5</div> <div class="three-wide">nr6</div> </div>
我想我在某种程度上需要弄清楚当div的增加宽度是在整页宽度并且在那些上设置相等的高度.然后在下一个div上做同样的事情.但我无法绕过它.目前我只是用它来设置包装器的子节点的高度:
$.fn.equalHeights = function(px) { $(this).each(function(){ var currentTallest = 0; $(this).children().each(function(i){ if ($(this).height() > currentTallest) { currentTallest = $(this).height(); } }); // for ie6,set height since min-height isn't supported if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); } $(this).children('div').css({'min-height': currentTallest}); }); return this; };
解决方法
跟踪宽度,当它们相加到总宽度时,然后调整列的大小(跟踪您查看的列或更多可能更容易),然后重置currentTallest变量.因此,每次到达行尾时,您都会在循环内部进行调整大小.