有一个5列的行 - 所有必须采取相同的高度

Question

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

基本上我有一个五列圆柱，一列采用可以扩展高度的任何类型的内容，但任务是使兄弟列占据与该列相同的高度内容。

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

正如你在第二行中看到的那样，它内部的内容越大，占据了高度，但这也打破了兄弟姐妹的身高。

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

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

Answer 1

使用min-height属性，对于跨浏览器解决方案，请查看：

http://css-tricks.com/snippets/css/cross-browser-min-height/

<强> Working Example

Answer 2

如果您不知道具有可变内容高度的一列是什么，那么不，您不能单独使用CSS。你需要伪造它，或者使用javascript。

如果你有一个固定宽度的布局，你可以尝试faux column技术。这是用垂直平铺的背景图像“伪装”，给出了列高度相同的错觉。本文中的示例使用两列，但没有理由不能将它用于五列。

另一种方式是使用javascript。如果您使用的是jquery，there is a plugin可以帮助您。基本思想是确定最大的柱高，然后将该高度应用于其他列。