CSS – 父div没有扩展到子的宽度/高度

前端之家收集整理的这篇文章主要介绍了CSS – 父div没有扩展到子的宽度/高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望将标题叠加到图像上.我已设法做到这一点,但图像正在从父div扩展.

我将包含div设置为内联块,因为我希望它为“自动调整大小”,而不是占用宽度:100%.如果查看当前输出,您将看到图像可能位于黑色边框内.

如果您遇到跨浏览器问题,它只需要在Chrome中运行.

提前致谢!

LIVE DEMO

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中转义,因为它的位置设置为绝对值.从文档的流中删除绝对定位的元素,导致父元素崩溃,就像子元素不在那里一样.如果将其更改为relative,则它将包含在黑盒中:
#body_image{
    position: relative;
}

http://jsfiddle.net/AaXTm/2/

原文链接:https://www.f2er.com/css/215714.html

猜你在找的CSS相关文章