与960.gs相同的列高度?

时间:2010-01-30 16:37:47

标签: css 960.gs

我在一行中有4列,并且根据我在每个列中放置的信息量,它们将具有不同的高度。你可以看到,如果你在它们上面加上背景颜色。

如何为其他列提供具有最大高度的列的高度?

3 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:2)

您可以使用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>