css - 有一个 5 列的行 - 都必须采用相同的高度

Question

现在这是一个棘手的问题，担心不使用表格或 JavaScript 来完成此任务。

基本上我有一个五列的行，一列采用可以扩展高度的任何类型的内容，但任务是使同级列占用与具有流体内容的列相同的高度。

演示：http: //jsfiddle.net/Mrg5E/

正如您在第二行中看到的，它里面有更大的内容占据了高度，但这也打破了兄弟姐妹的高度。

我查看了建议的答案，主要使用表格或 JavaScript - 这是我需要避免的。我还研究了诸如圣杯之类的技巧，但是当我有 5 列（有时是 4 列）时，这主要用于 2-3 列。

CSS中是否有可能修复以匹配所有兄弟姐妹的高度？

score 0 · Accepted Answer

使用min-height属性和跨浏览器解决方案，看看：

score 0 · Accepted Answer

如果您不知道具有可变内容高度的一列将是什么，那么不，您不能仅使用 CSS 来做到这一点。您将需要伪造它，或使用 javascript。

如果你有一个固定宽度的布局，你可以试试仿列技术。那是用垂直平铺的背景图像“伪造”它，给人一种列高度相同的错觉。文中的例子用了两列，但没有理由不能用五列。

另一种方法是使用javascript。如果您使用的是 jquery，有一个插件可以帮助您。基本思想是确定最大的列高度，然后将该高度应用于其他列。