CSS - 父div沒有擴展到子的寬度/高度

Question

我希望將標題疊加到圖像上。 我設法做到了這一點，但圖像正在從父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>

Answer 1

#body_image元素從#body_image_container轉義，因為它的position設置為absolute 。 絕對定位的元素將從文檔的流中移除，導致父元素崩潰，就像子元素不存在一樣。 如果將其更改為relative ，則它將包含在黑框中：

#body_image{
    position: relative;
}

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

Answer 2

在父div中嘗試這個css。

Overflow:auto

Answer 3

檢查這個小提琴。 您需要將圖像的子元素的位置設置為絕對，並將父元素設置為相對。 相應地更改標題的寬度。

child-element {
    position:absolute;
}

parent-element {
    position:relative
}

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