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沒有擴展到子寬/高度

回答

相關問題