Question

我有以下html：

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

我想要这种行为：

如果没有图像（没有＆lt; img＆gt;标记），则p应该指示.container的大小。
如果有图像，但p更高，.container应该与p一样高。
如果图像较高，.container应该与图像一样高，并且p应该从.container的底部向上“增长”，并取决于其中的文本量（如position：absolute; bottom：0在一个位置：相对盒子）。
p应该具有半透明的背景，因此您可以通过元素部分地看到图像。透明度不是问题，但我包括这个，因为我不想要一个解决方案，使得p占据.container的全部高度，然后重新定位文本。
它必须在IE8中工作（只需要浏览器）。
如果需要，我可以自由地操纵html结构，但我希望尽可能简单。

我可以用javascript轻松完成，但可以用纯CSS吗？

（此codepen部分显示了我正在尝试做的事情：http://codepen.io/anon/pen/sqjnz）

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

Answer 1

this你追求的是什么？

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

和CSS：

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

为了适应半透明的IE，我建议你阅读Lea Verou's blog post。

div的高度自动调整为内部元素

1 个答案: