CSS文本对齐容器的底部 [英] CSS Text Align Bottom of Container

问题描述

我有一张标题，一面有大图像，另一面有一小段文字。我希望段落在标题div的底部开始。如果段落中有5行，我希望最后一行位于标题的底部。

I have a header which has a large image floated on one side, and a small paragraph of text on the other side. I want the paragraph to start at the bottom of the header div. If there were 5 lines in the paragraph, I want the last line to be at the bottom of the header. I'm having trouble getting the paragraph to align itself down there.

我有这样的事情：

<div id='header'>

     <img id='logo' />

     <p id='quote'></p>

</div>

而CSS是：

And the CSS is:

div#header {
    height: 200px;
}

div#header img#logo {
    float: left;
}

p#quote {
    float: left;
}

推荐答案

http://jsfiddle.net/danheberden/ymwPe/

<div id="container">
    <div id="gonnaBeOnTheBottom">
        <p>Hi there!</p>
        <p>I'm on the bottom!</p>
    </div>
</div>

css：

#container {
    background: #EEE;
    height:400px;
    width:400px;
    position:relative;
}
#gonnaBeOnTheBottom {
    position:absolute;
    bottom:0;
}

通过设置 position：relative 在父容器上，你可以在其中放置绝对位置元素：）

by setting position:relative on the parent container, you can absolute position elements inside of it :)

这篇关于CSS文本对齐容器的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！