how can I align text/image/links within a grid <div> of the twitter bootstrap css?

问题

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.

This is the 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>

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

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

Thanks a lot,

Sebastian

回答1:

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; }

Check it out on jsfiddle:

http://jsfiddle.net/A8XE2/

来源：https://stackoverflow.com/questions/9455927/how-can-i-align-text-image-links-within-a-grid-div-of-the-twitter-bootstrap-cs