我如何强制浮动DIV与另一个浮动DIV的高度相匹配？

我的HTML代码只是将页面分为两列,分别为65%,35%.

在response div,我有可变数据; 在note div,我有固定的数据.尽管两者div有两组不同的数据,但我需要它们以相同的高度显示,以便背景颜色看起来填充包含两者的框.当然,问题在于response div,其高度根据当前在其中显示的数据量而变化.

我怎样才能确保两列的高度始终相等？

1> meandmycode..：

---

将它们包含在应用了背景颜色的包含div中,并在"列"后面有一个清除div.

  
column a
  
column b
  

---

更新以解决一些评论和我自己的想法:

这种方法有效,因为它本质上是你的问题的简化,在这个有点'oldskool'的方法中我把两列放在后面跟一个空的清除元素,清除元素的工作是告诉父(带背景)这是哪里浮动行为结束,这允许父级在clear的位置基本上渲染0像素的高度,这将是最高的先前浮动元素.

这样做的原因是为了确保父元素与最高列一样高,然后在父元素上设置背景以给出两列具有相同高度的外观.

应该注意的是,这种技术是'oldskool',因为更好的选择是使用像clearfix这样的高度计算行为,或者只是在父元素上隐藏overflow:hidden.

虽然这适用于这种有限的场景,但如果您希望每列看起来视觉上不同,或者它们之间有间隙,那么在父元素上设置背景将不起作用,但是有一个技巧可以获得此效果.

诀窍是在所有列中添加底部填充,以达到您预期的最大尺寸,这可能是最短和最高列之间的差异,如果您无法解决这个问题,那么选择一个大的数字,则需要添加相同数字的负底边.

您将需要隐藏在父对象上的溢出,但结果将是每个列将请求呈现由边距建议的此额外高度,但实际上不请求该大小的布局(因为负边距对抗计算).

这将使父级呈现最高列的大小,同时允许所有列以其高度渲染+所使用的底部填充的大小,如果此高度大于父级,则其余的将简单地剪切掉.

  
column a
column a
  
column b

你可以在bowers和wilkins网站上看到这种技术的一个例子(参见页面底部的四个水平聚光灯图像).

---

他的例子没有这个要求,感谢downvote虽然:).

---

如果两列具有不同的背景颜色,则无济于事.

2> 小智..：

---

如果您试图强制浮动div与另一个匹配以创建列效果,这就是我的工作.我喜欢它,因为它简单而干净.

    
    
column a
    
column b
Line 2
Line 3
Line 4
Line 5
    
Column C
    

我认为这是有道理的.即使使用动态内容,它似乎也能很好地工作.

---

唯一的问题是我想在每列周围有一个边框,这将隐藏底部边框.:(

3> Justin Yost..：

---

这是一个jQuery插件,可以将多个div的高度设置为相同.以下是插件的实际代码.

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
    if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
        });
    if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
        // for ie6, set height since min-height isn't supported
    if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
        $(this).children().css({'min-height': currentTallest}); 
    });
    return this;
};

---

@ akshar-prabhu-desai AJAX？!？,请指出我在这个答案中的异步JavaScript.

---

根据设计,使用这样的javascript可能是唯一的选择.

4> Aaron Digull..：

---

这个问题的正确解决方案是使用 display: table-cell

重要提示:此解决方案不需要,float因为table-cell已经将其div转换为与同一容器中的其他元素对齐的元素.这也意味着你不必担心清除浮动,溢出,背景闪耀以及float黑客为聚会带来的所有其他令人讨厌的惊喜.

CSS:

.container {
  display: table;
}
.column {
  display: table-cell;
  width: 100px;
}

HTML:

    
Column 1.
    
Column 2 is a bit longer.
    
Column 3 is longer with lots of text in it.

有关:

的jsfiddle

对列使用CSS"display:table-cell"

5> bendewey..：

---

你应该将它们包装在没有浮动的div中.

    
Response with two lines
    
single line note

我还在这里使用了clearfix补丁http://www.webtoolkit.info/css-clearfix.html

---

如果两列具有不同的背景颜色,则无济于事.除非你知道其中一列总是比另一列更长:给"包装器"提供最短列的backgorund颜色,让最长的列有自己的背景来"假"两个同样长的列.