具有等于​​最大高度的 CSS 列

Question

我们目前正在进行一个元素，该元素需要 2 个或更多个等高的列。更具体地说，每列的高度必须是其中最大列高的高度。 DIV 通过 float: left 彼此相邻放置，并且它们的宽度之和恰好为 100%。可以在这个 fiddle 中找到一个例子:http://jsfiddle.net/Mj3Ks/1/ .

我们允许将列中的元素从一列拖到另一列。因此列的高度不是固定的，应该动态更新。目前我们已经实现了一个 javascript 解决方案，可以根据拖动和子项调整大小重新计算高度。然而，这种解决方案非常麻烦且容易出错。因此，我们正在寻找一个纯 css，以便父元素具有最大子元素的高度，并且每个子元素都具有其父元素的 100%。该解决方案必须与 IE 9+ 和任何其他主要浏览器兼容。我希望任何人都可以帮助我们。

Answer 1

有一个简洁的 CSS hack 可以完成您想要做的事情，但通常没有 CSS 很难做到。

首先，我们需要添加

overflow: hidden;

到父 div。

然后，好的一点，在子 div 上添加

margin-bottom: -100%;
padding-bottom: 100%;

这确实意味着您在当前代码中丢失了底部边框，因此我通过向容器添加底部边框来补救。

参见:http://jsfiddle.net/nZDTW/

来源:http://www.ejeliot.com/blog/61