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

我正在寻找覆盖图像上的标题。我已经设法做到了这一点，但图像正在扩展出亲本div。CSS - 父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>

来源

2012-12-23 user887515

我想你应该给''body-image'分配'inline-block'，否则浏览器会混淆使用哪个宽度。现在无法检查。 –

有很多原因可能会发生，看到几个，试试这个问题：http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents – Nacht

#body_image元素正在从#body_image_container转义，因为它的position设置为absolute。将绝对定位的元素从文档流中移除，导致父元素崩溃，就好像子元素不在那里一样。如果您将其更改为relative的话，那就包含在黑盒子里：

#body_image{ 
    position: relative; 
}

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

来源

2012-12-23 16:57:28 cimmanon

谢谢，并感谢你为了详细的解释。 – user887515

检查这个小提琴。您需要将图像的子元素的位置设置为绝对，并将父元素设置为相对。相应地更改标题的宽度。

child-element { 
    position:absolute; 
} 

parent-element { 
    position:relative 
}

http://jsfiddle.net/AaXTm/4/

来源

2012-12-23 18:52:56

向上thanks.it适合我 – Rasel

试试这个CSS父DIV。

Overflow:auto

来源

2013-10-08 19:16:47

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

回答

相关问题