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高度

回答

相关问题