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

问题描述

我需要在另一个Div包装器内的一系列DIV上设置相等的高度.问题是我不希望所有这些高度相同.页面有3列，浮动divs可以是1、2或3列宽. Divs向左漂浮，因此以下示例将为我包装中的三行Divs.如何在同一行中的DIVS上设置相等的高度?在我的示例中，我希望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的附加宽度何时在整页宽度上，并将其设置为相等的高度.然后在下一个divs上执行同样的操作.但是我不能把头缠绕在上面.目前，我只是在使用它来设置包装器的孩子的高度:

$.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变量.因此，每次到达行末端时，您都会在循环内进行调整大小.

其他推荐答案

由于您正在使用jQuery，您是否使用均等插件?

/plugin.html

似乎您将有一些逻辑来知道在击中页面宽度之前连续有多少个DIV，然后开始使用ID的新DIV行.然后致电

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

根据您需要的次数多次，这应该将它们全部设置为每个ID的高度.

您也可以通过连续为Divs做一个，并用.width().

其他推荐答案

也许您可以循环循环divs，并检查$(this).offset(). 如果offset().顶部不等于最后一个偏移，您知道您在另一排.

本文地址：https://www.itbaoku.cn/post/583360.html