Question

我需要在另一个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;
};

Answer 1

由于您使用的是jQuery，您使用的是EqualHeights插件吗？

http://www.cssnewbie.com/example/equal-heights/plugin.html

好像你有一些逻辑可以知道在达到页面宽度之前连续多少个div，然后用ID开始一个新的div行。然后拨打

$('#custom-id').equalheights();

根据您的需要多次，并且应该将它们设置为每个ID的相同高度。

你也可以通过对一行中的div执行每个，并使用.width（）添加它们的宽度来构建它。

Answer 2

跟踪宽度，当它们相加到总宽度时，然后调整列的大小（跟踪您查看的列或更多可能更容易），然后重置currentTallest变量。所以每次到达行尾时，你都会在循环内部进行大小调整。

Answer 3

也许你可以遍历div，并检查$（this）.offset（）。top 如果offset（）。top不等于最后一个偏移量，则表示您在另一行上。

Answer 4

我像彼得建议的那样去了。我把插件改写为：

$.fn.cleverHeights = function(px) {
$(this).each(function(){
    var currentTallest = 0;
    var width = 0;
    var row = new Array();
    $(this).children().each(function(i){
        if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        width += parseInt($(this).outerWidth(), 10);
        row[++row.length] = $(this);
        if (width > 900) {
            $.each( row , function() {
                $(this).css({'min-height': currentTallest});
                // for ie6, set height since min-height isn't supported
                if ($.browser.msie && $.browser.version == 6.0) { $(this).css({'height': currentTallest}); }
            });
            row.length = 0;
            width = 0;
            currentTallest = 0;
        }
    });
});
return this;
};

感谢输入

Answer 5

EqualHeight.js-v1.0.1
https://github.com/JorenVanHee/EqualHeight.js

此轻量级插件甚至支持Windows调整大小和响应模式这是使用方法：

$(window).load(function() {
$('.wrapper div').equalHeight({responsive: true});});

在多个div上设置相等的高度

5 个答案: