html - 在不知道其宽度的情况下将 float 的 div 附加到底部

Question

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

这是我现在拥有的:

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 长度单位指定垂直对齐的特定长度。

编辑:因为没有更多的 float ，你可以放弃容器高度的定义。还值得注意的是，在 #container 上设置 overflow: hidden; 也可以防止只有 float 子元素的父元素出现高度为 0 的问题。