[英]CSS - parent div is not expanding to width/height of child
我希望将标题叠加到图像上。 我设法做到了这一点,但图像正在从父div
扩展。
我将包含div
设置为inline-block
,因为我希望它为“自动调整大小”,而不是占用width: 100%
。 如果查看当前输出,您将看到图像可能位于黑色边框内。
如果您遇到跨浏览器问题,它只需要在Chrome中运行。
提前致谢!
CSS:
#body_content {
border: solid 1px blue;
display: inline-block;
padding: 5px;
}
#body_header {
border: solid 1px red;
font-size: 25px;
padding: 5px;
}
#body_image {
position: absolute;
}
#body_image_caption {
color: white;
line-height: 30px;
margin-left: 10px;
}
#body_image_container {
background: white;
border: solid 1px black;
margin-top: 3px;
padding: 10px;
}
#body_image_overlay {
background-color: black;
bottom: 5px;
display: block;
height: 30px;
opacity: 0.85;
position: absolute;
width: 100%;
}
HTML:
<div id="body_content">
<div id="body_header">
Heading
</div>
<div id="body_image_container">
<div id="body_image">
<img src="http://i.imgur.com/s6G8n.jpg" width="200" height="200" />
<div id="body_image_overlay">
<div id="body_image_caption">
Some Text
</div>
</div>
</div>
</div>
</div>
#body_image
元素从#body_image_container
转义,因为它的position
设置为absolute
。 绝对定位的元素将从文档的流中移除,导致父元素崩溃,就像子元素不存在一样。 如果将其更改为relative
,则它将包含在黑框中:
#body_image{
position: relative;
}
在父div中尝试这个css。
Overflow:auto
检查这个小提琴。 您需要将图像的子元素的位置设置为绝对,并将父元素设置为相对。 相应地更改标题的宽度。
child-element {
position:absolute;
}
parent-element {
position:relative
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.