div內的div 0高度

我創建了div id =「A」和div id =「B」，並將後者div放在div A中。Div A具有背景色屬性，但內部div顯示爲它自己獨立的div沒有A的背景色。我認爲div內的div會採用父div的屬性。相反，div A在瀏覽器上顯示爲0高度。下面的DIV遵循相同的結構，只是名稱不同： 'AboutPictures'（A）和 '雅'（B）div內的div 0高度

<div id="AboutPictures"> 
    <div id="ya"> 
     <img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg"> 
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
     <figure> 
      <figcaption>Hello I am Edward</figcaption> 
     </figure> 
    </div> 
</div>

CSS：

#AboutPictures { 
    background-color: rgb(0,200,255); 
    height:100%; 
} 
#ya{ 
    float:right; 
} 
#ya figure{ 
    float:right; 
}

來源

2016-03-17 st4rgut

嘿有不同的可能性，以解決這個問題：

你可以一個float: right/left;添加到您的外層div（#AboutPictures）
或者你可以設置爲display: inline-block;

看到這個小提琴：https://jsfiddle.net/8j2zpfdg/

另一個蘇答案作爲參考：How to make div not larger than its contents?

來源

2016-03-17 15:42:46 henningmu

涼爽，所以當你添加浮到外層div沒有怎麼沒有承認有在它的內容？ – st4rgut

在外部div上使用float時，它的行爲與內嵌塊相同。如需更詳細的解釋，請查看[SO Answer]（http://stackoverflow.com/a/16568504/5663598）該答案爲您的問題提供了更多的見解和可能的解決方案。很高興我能幫助你！ – henningmu

由於您#ya DIV是浮動的，在父母div只看到空的內容。您需要clear#AboutPictures div，通過應用clear: both風格。請參閱：What is a clearfix?

工作例如：

<div id="AboutPictures"> 
    <div id="ya"> 
     <img style='border:5px solid #F00' src="https://placehold.it/350x150"> 
     <div style="clear: both;"></div> 
     <figure> 
      <figcaption>Hello I am Edward</figcaption> 
     </figure> 
    </div> 
    <div style="clear: both;"></div> 
</div>

來源

2016-03-17 15:31:29 Mike

div內的div 0高度

回答

相關問題