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

Question

我需要在另一个 div 包装器内的一系列 div 上设置相同的高度。问题是我不希望所有的高度都相同。页面类型有 3 列，浮动 div 可以是 1、2 或 3 列宽。 div 向左浮动，因此下面的示例将在包装器中提供三行 div。如何在同一行的div上设置相同的高度？在我的示例中，我希望 nr 1 和 2 具有相同的高度，而 3、4 和 5 具有相同的高度？我事先无法知道有多少个 div 或者它们有多宽或多高。 编辑： 例如，它们可以是 300、600 或 900 px 宽，页面宽度为 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 执行相同的操作。但我无法理解它。目前我只是用它来设置包装器子项的高度：

$.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

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

Answer 2

既然您使用的是 jQuery，那么您是否使用 EqualHeights 插件？

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

似乎你会有一些逻辑来知道在达到页面宽度之前一行中有多少个 div，然后使用 ID 开始一个新的 div 行。 调用

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

然后根据需要多次

，这应该将每个 ID 的高度设置为相同。您也可以在此基础上通过对一行中的 div 执行每个操作，并使用 .width() 添加它们的宽度。

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

这个轻量级插件甚至支持窗口调整大小和响应模式
以下是如何使用：

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