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

我需要在另一个div包装内的一系列div上设置相同的高度。问题是我不想要所有的高度。页面类型有3列，浮动div可以是1,2或3列宽。 div浮动，所以下面的例子会在我的包装中给我三行div。我怎样才能在同一行的div上设置相同的高度？在我的例子中，我希望1号和2号的高度相等，3号，4号和5号的高度相等？事先不知道有多少divs或者它们有多宽。 编辑：它们可以是例如300，600或900像素宽和页面宽度为900px在多个div上设置相等的高度

<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; 
};

来源

2010-03-18 ugreen

跟踪宽度以及它们加起来的总宽度，然后调整列大小（跟踪您查看哪些列或多少可能更容易），然后重置当前最高变量。所以，每当你到达行尾时，你都会在循环内调整大小。

来源

2010-03-18 20:31:25 Peter

感谢您的输入。不知道，如果我以一种特别有效的方式做到了，但它的工作原理:) – ugreen 2010-03-21 12:15:33

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

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

好像你会有些逻辑知道有多少的div是连续命中页面宽度，然后开始用ID一个新的div行之前。然后拨打

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

尽可能多的时间，你应该设置，并应该将他们都设置为每个ID相同的高度。

你可以建立在太做一个对每一个div的一排，并与.WIDTH将其宽度（）。

来源

2010-03-18 20:15:14 Kevin

也许你可以通过div循环，并检查$（this）.offset（）。top 如果offset（）。top不等于最后一个偏移量，那么你知道你在不同的行上。

来源

2010-03-18 20:19:42 fortysixandtwo

我跟着彼得建议的事情走了。我改写了插件：

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

感谢输入

来源

2010-03-21 12:11:53 ugreen

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

回答

相关问题