与 960.gs 的列高度相同？

【问题标题】：same height of columns with 960.gs?与 960.gs 的列高度相同？
【发布时间】：2010-01-30 16:37:46
【问题描述】：

我在一行中有 4 列，根据我在每列中输入的信息量，它们会有不同的高度。如果你给它们加上背景颜色，你可以看到。

如何给其他列指定高度最大的列的高度？

【问题讨论】：

使用表格。（躲开并逃跑）

标签： css 960.gs

【解决方案1】：

您可以使用 jQuery 来执行此操作。 http://www.cssnewbie.com/equal-height-columns-with-jquery/

对于仅使用 CSS 的方法，您可以通过将所有列包装在一个 div 中，然后应用单个背景图像，使用与列宽匹配的 4 块颜色，使它们看起来具有相同的高度。

这个包装器 div 将扩展为最大列的大小，并给人以 4 个大小相等的列的印象。

【讨论】：

【解决方案2】：

好吧，我不知道这是否适用于 960，但在蓝图中，您可以通过将以下样式应用于列来实现：

padding-bottom : 20000px;
margin-bottom : -20000px;
overflow:hidden;

【讨论】：

嗯...如果不删除上面建议的样式，尝试将列包装到
中，也会发生这种情况吗？然后您可以尝试应用 .clearfix 类 (webtoolkit.info/css-clearfix.html) 只是猜测。

【解决方案3】：

您可以使用 CSS 属性 display: table-cell

http://jsfiddle.net/AGjBM/

<style>
    div.table-cell {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>

【讨论】：