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

本文是小编为大家收集整理的关于在多个 div 上设置相等的高度的处理方法,想解了在多个 div 上设置相等的高度的问题怎么解决?在多个 div 上设置相等的高度问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

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