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

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

将其包裹在包含背景色的包含div中，并在“列”之后添加一个清除div。

<div >  <div >column a</div>  <div >column b</div>  <div ></div></div>

---

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

该方法之所以有效，是因为它本质上是简化了您的问题，在这种有点“过时”的方法中，我将两列放在其后，然后是一个空的clearing元素，clearing元素的工作是告诉父级（有背景）这是哪里浮动行为结束后，这将允许父对象在透明位置实际渲染高度为0的像素，这将是先前最高浮动元素的大小。

原因是要确保父元素与最高的列一样高，然后在父元素上设置背景以使两列具有相同的高度。

应该注意的是，这种技术是“老套的”，因为更好的选择是使用诸如clearfix之类的东西或通过简单地在父元素上隐藏溢出来触发高度计算行为。

尽管这在有限的情况下可行，但是如果您希望每个列在外观上看起来有所不同，或者在它们之间留有空隙，那么在父元素上设置背景将不起作用，但是有一种技巧可以达到这种效果。

诀窍是在所有列中添加底部填充，以达到您期望的最大大小，这可能是最短列和最高列之间的差异，如果您无法解决此问题，则选择一个大数字，然后需要添加底数为负的相同数字。

您将需要隐藏在父对象上的溢出，但结果将是每一列都将请求呈现由边距建议的此额外高度，但实际上并不需要该大小的布局（因为负边距会抵消计算）。

这将以最高的列的大小渲染父对象，同时允许所有列以其高度+所用底部填充的大小渲染，如果此高度大于父对象，则其余部分将被剪掉。

<div >  <div >column a<br />column a</div>  <div >column b</div></div>

您可以在bowers and wilkins网站上看到此技术的示例（请参阅页面底部的四个水平聚光灯图像）。