在多个div上设置相等的高度 [英] set equal height on multiple divs

问题描述

我需要在另一个div包装内的一系列div上设置相等的高度。问题是，我不想在所有的相同的高度。页面类型有3列，浮动div可以是1,2或3列宽。 divs向左移动，所以下面的例子将在我的包装器中给我三行div。如何在同一行中的div上设置相等的高度？在我的例子中，我想要nr 1和2有相等的高度，3，4和5另一个相等的高度？我不能预先知道有多少divs有或多么宽或高。 修改：例如宽度为300,600或900像素，页面宽度为900像素

I need to set equal height on a series of divs inside another div wrapper. The problem is that I dont want the same height on all of them. The page kind of have 3 columns and the floating divs can be 1, 2 or 3 columns wide. The divs float left, so the following example will give me three rows of divs in my wrapper. How can I set equal height on the divs that are in the same row? In my example I want nr 1 and 2 to have equal height and 3, 4 and 5 another equal height? I cant know beforehand how many divs there is or how wide or high they are. They can be for instance 300, 600 or 900 px wide and the page width is 900px

<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上做同样的。但我不能缠绕我的头。目前只是使用它来设置包装器的子元素的高度：

Im thinking I somehow need to figure out when the added width of the divs is at the full page width and set equal height on those. Then do the same on the next divs. But I cant wrap my head around it. Currently im just using this to set the height on the children of the wrapper:

$.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变量。所以你每次到达行尾都会在循环中调整大小。

Keep track of the widths and when they add up to the total width then resize the columns (keep track of which ones you've looked at OR how many might be easier) and then reset your currentTallest variable. So you'd be doing the resizing inside the loop every time you reached the end of the row.

这篇关于在多个div上设置相等的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！