Html CSS - 父 div 没有扩展到孩子的宽度/高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14012678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - parent div is not expanding to width/height of child
提问by user887515
I am looking to overlay a caption on to an image. I have managed to do this, but the image is expanding out of the parent div.
我希望将标题叠加到图像上。我设法做到了这一点，但图像正在扩展到 parent 之外div。
I have the containing divset to inline-block, as I want it to 'auto size', not take up width: 100%. If you look at the current output, you'll see the image could be within the black bordered box.
我将包含div设置为inline-block，因为我希望它“自动调整大小”，而不是占用width: 100%。如果您查看当前输出，您会看到图像可能位于黑色边框内。
It only needs to work in Chrome, if you encounter cross-browser issues.
如果您遇到跨浏览器问题，它只需要在 Chrome 中工作。
Thanks in advance!
提前致谢！
CSS:
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:
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>
回答by cimmanon
The #body_imageelement is escaping from the #body_image_containerbecause its positionis set to absolute. Absolutely positioned elements are removed from the document's flow, causing parent elements to collapse as though the child element wasn't there. If you change it to relative, then it becomes contained within the black box:
该#body_image元素正在逃离 ，#body_image_container因为它position被设置为absolute。绝对定位的元素从文档流中移除，导致父元素折叠，就好像子元素不存在一样。如果将其更改为relative，则它将包含在黑框中：
#body_image{
position: relative;
}
回答by Nalan Madheswaran
Try this css in parent div.
在父 div 中试试这个 css。
Overflow:auto
回答by Sumit Gera
Check this fiddle. You need to set the position of the child element of the image to be absolute and the parent element to be relative. Change the width of the caption accordingly.
检查这个小提琴。您需要将图像的子元素的位置设置为绝对位置，将父元素的位置设置为相对位置。相应地更改标题的宽度。
child-element {
position:absolute;
}
parent-element {
position:relative
}
