如何实现Bottom Align浮动div对于它的容器大小

Question

如何实现以下布局？具体来说，Image和DIV

的定位

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

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

Answer 1

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

Live Demo #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);

（您可能想要更改+ 10的{​​{1}}）

<强> HTML：

parseInt($('#top img').css('margin-right'), 10)

Answer 2

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

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

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

<强>更新

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