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

问题描述

我试图使用Twitter的bootstrap CSS框架，在那里只有网格布局。
现在我只想将每个网格单元格的内容< div> 对齐到底部。
我显然没有CSS buff。

I am trying to use Twitter's bootstrap CSS framework and within there so far only the grid layout.Now I simply want to align the content of each grid cell <div> to the bottom.I am obviously no CSS buff at all.

这是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> 与文本（和/或第一个）底部对齐。

I cannot find a way to make the second column <div> with the text (and/or the first) be bottom aligned.

有人知道css魔法，
（或者如何使< div> 底部对齐？

Does anybody know the css magic I would need for that?(Or also how I would make both <div>s bottom-aligned?

谢谢很多，

Sebastian

Sebastian

推荐答案

属性的类=rowdiv到relative，然后将包含文本的div的position属性设置为absolute，将bottom属性设置为0.

You need to set the position property of the class="row" div to relative and then set the position property of the div containing text to absolute and the bottom property to 0.

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

在jsfiddle上查看：

Check it out on jsfiddle:

这篇关于如何对齐网格内的文本/图像/链接< div>的twitter bootstrap css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！