将浮动的div连接到底部而不知道其宽度

Question

我有一个包含一些文本的div,它们会浮动,因此它可以显示在图像的右侧,并且它们都被包装在一个容器中.但是,我无法将文本附加到容器的底部.如果我position: relative在容器和position: absolute; bottom: 0包含文本的div上使用,在大多数情况下,文本开始渲染图像.

这就是我现在拥有的:

http://jsfiddle.net/RWkjL/

简而言之,我想要的是:

看起来像这样:

...不知道文本的宽度.

谢谢!

Answer 1

这可以vertical-align在CSS中使用.

HTML

<div id="container">
    <img src="http://www.purac.com/_sana_/handlers/getfile.ashx/5671e36e-6ba3-4ffc-9b58-8495cc024bfa/Sample-grey.png" />
    <p id="text">
        Lorem ipsum <br/>
        dolor sit amet
    </p>
</div>

CSS

#container {
    height: 128px;
}

img, #text {
    vertical-align:bottom;
    display: inline-block;
}

这是一个更新的JSFiddle.

如果您需要更多控制权,可以vertical-align 在此处阅读更多相关信息.您可以使用任何CSS长度单位指定垂直对齐的特定长度.

编辑:因为没有更多浮动,您可以删除容器高度的定义.还值得注意的是,设置overflow: hidden;on #container还可以防止在仅具有浮动子元素的父元素中出现0高度问题.