Css 根据内部元素自动调整div的高度

我有以下html：

<div class="container">
    <img src="..."/>
    <p>Heading</p>
</div>

标题

我想要这种行为：

• 如果没有图像（没有标签），p应该指示.container的大小
• 如果有图像，但p较高，则容器应与p一样高
• 如果图像更高，.container应该与图像一样高，p应该从.container的底部向上“增长”，具体取决于其中的文本量（如位置：绝对；位置：相对框中的底部：0）
• p应该有一个半透明的背景，这样你可以通过元素部分地看到图像。透明度不是问题，但我包含了这一点，因为我不希望有一种解决方案使p占据.container的整个高度，然后重新定位文本
• 它必须在IE8中工作（只需要浏览器）
• 如果需要的话，我可以自由地操作html结构，但我希望它尽可能简单

我可以用javascript轻松地完成这项工作，但可以用纯CSS完成吗

（此代码笔部分显示了我正在尝试执行的操作：）

编辑澄清：我希望.container与最高的孩子（img或p）一样高。如果同时存在img和p，则文本应位于图像的顶部，并锚定在.contianer的底部，以便随着其增长，它会覆盖越来越多的图像。如果没有图像（img标签不存在），则该框的行为应类似于普通div，并扩展到与p相同的大小。

您要的是什么

<div class="container">
    <img src="http://lorempixel.com/100/100"/>
    <p>Heading</p>
</div>​

---

为了让IE融入到半透明的混合中，我建议您阅读。

因此，我在这里看到的唯一问题是如何将p定位在图像的底部。容器始终与最高元素一样高，只要它们不浮动。“这就是你要找的吗？”罗伯特抱歉描述得不好。我已经澄清了这个问题。不完全是。如果你看代码笔，你可以看到p延伸到图像的全宽，不管它有多大。我希望最好不要在容器之外的任何东西上指定with。如果我移除img标签（容器折叠），您的解决方案也无法工作。也许这不能用纯css完成。我道歉。当我移除img标签时，您的解决方案似乎有效。我先对它做了些别的事，把它弄坏了。你知道为什么图像不能填满整个容器的高度吗？图像下方似乎有一个小的（5英寸像素）间隙。@托马斯：我怀疑小像素间隙与

p

有关，而与

img

无关。我已经更新了解决这个问题的JSFIDLE。单击我的答案中的链接，您将看到更新的显示。容器中的两个元素都需要设置为底部，以便彼此对齐。

.container {
    /* these are just set so we can see the size of container */
    margin: 20px;
    padding: 5px;
    background-color: #eee;
}
.container img {
    margin-right: -100px;
    vertical-align: bottom;
}
.container p {
    display: inline-block;
    width: 100px;
    background-color: rgba(0,0,0,.75);
    line-height: 1em;
    color: #fff;
    vertical-align: bottom;
}​