如何实现底部对齐浮动div，使其大小适合其容器

Question

我怎样才能实现以下布局？特别是 Image 和 DIV 的定位，

我发现除非我为 Div 设置特定的宽度，否则它只会继续到下一行并占据整个空间容器的宽度。另外，将其相对于图像底部对齐也给我带来了麻烦。目前它们都是 float:left

编辑：到目前为止，这两个解决方案都有效图像的宽度是恒定的，我想我可以使用它，但它会出现在作者个人资料页面的 WordPress 主题中，并且图像的宽度可能会略有变化。是否有一种解决方案可以让 Div 位于图像旁边（减去填充），无论图像有多宽或多窄？基本上让 div 调整其宽度以适应图像宽度。

Answer 1

在 IE7/8、Firefox、Chrome 中测试。

现场演示#2

CSS ：

#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}

JS/jQuery：

$('#header').css('margin-left', $('#top img').width() + 10);

（您可能需要更改 parseInt($('#top img').css(' 的 + 10右边距'), 10))

HTML:

<div id="container">
    <div id="top">
        <img src="" />
        <div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
    </div>
    <div id="content">dfgdfg</div>
</div>

Answer 2

我将标题图像和标题 div 放入其自己的容器中，并使用绝对定位将项目放置在其中。

我在这里整理了一个快速示例： http://jsfiddle.net/JjxYj/1/

这里请注意，如果删除标题中 Div 的宽度，它将变成其内容的宽度。

更新

要回答问题的更新部分，这里有另一个解决方案，该解决方案允许图像具有任意宽度，同时仍将标题文本放置在其包含项目的底部：http://jsfiddle.net/JjxYj/5/