CSS文本对齐容器底部

Question

我有一个标题,一面有大图像浮动,另一面有一小段文字.我希望段落从标题div的底部开始.如果段落中有5行,我希望最后一行位于标题的底部.我无法让段落在那里对齐.

我有这样的事情:

<div id='header'>

     <img id='logo' />

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

</div>

CSS是:

div#header {
    height: 200px;
}

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

p#quote {
    float: left;
}

Answer 1

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在父容器上设置,你可以在其中绝对定位元素:)

Answer 2

更现代的方法是使用flexbox，此方法极大地简化了以后的响应式工作。

由于flexbox的可用空间分配是通过自动边距来管理的，因此您只需执行以下操作：

• 将父级设置为弹性显示
• 告诉您希望父项以列布局（从上到下）分配其子项
• margin-top: auto;对要粘贴在底部的元素应用a ，flex将应用上方的所有可用空间

#container {
    background: #eaeaea;
    height:180px;
    display: flex;
    flex-direction: column;
}

#bottom {
  border: 1px solid blue;
  margin-top: auto;
}

<div id="container">
    <p>Container content</p>
    <div id="bottom">
        This flex content will stay at the bottom!
    </div>
</div>