如何在twitter bootstrap css的网格<div>中对齐文本/图像/链接？

Question

我试图使用Twitter的bootstrap CSS框架,到目前为止只有网格布局.现在我只想将每个网格单元格的内容对齐<div>到底部.我显然没有CSS buff.

这是html:

<div class="container">
    <div class="row">
        <div class="span4">
            <a href="index.php"><img src="someprettyhighimage.gif"/></a>
        </div>
            <div class="span8">
                some text/links that need to be bottom aligned
            </div>
        </div
    </div>
</div>

我找不到一种方法来使第二列<div>与文本(和/或第一列)底部对齐.

有人知道我需要的css魔法吗？(或者我也将如何使两者<div>对齐？

非常感谢,

塞巴斯蒂安

Answer 1

您需要将class ="row"div的position属性设置为relative,然后将包含text的div的position属性设置为absolute,将bottom属性设置为0.

.row { position: relative; }
.span8 { position: absolute; bottom: 0; }

在jsfiddle上查看:

http://jsfiddle.net/A8XE2/