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

Question

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

以下是我现在所拥有的：

http://jsfiddle.net/RWkjL/

简而言之，我想要的是：

看起来像这样：

...不知道文字的宽度。

谢谢！

Answer 1

这可以使用CSS中的vertical-align来实现。

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

这是an updated JSFiddle。

如果您需要更多控制权限，可以详细了解vertical-align here。您可以使用任何CSS长度单位指定垂直对齐的特定长度。

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

Answer 2

虽然randak的答案完全正确，但这是解决问题的另一种方法：

#container {
    height: 128px;
    position:relative;
}

#picture {
    float: left;
}

#text {
    float: left;
    position:absolute;
    bottom:0px;
    left:128px;
}