1

我有以下html：

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

我想要这种行为：

  • 如果没有图像（没有 <img> 标签），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 相同的大小。

4

1 回答 1

3

这就是你所追求的吗？

<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 的博客文章。

于 2012-11-14T14:38:21.837 回答