Html div 即使有内容也没有高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19354845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div has no height even if it has content
提问by Beniamin Szabo
I have a <div>which has some <img>in it. Every <img>is inside it's own <div>. The problem is that the outer div is not automatically taking the height of the content even though I set it's height to auto. Also to display the inner divs inline I set them to float: left. But if i remove the float the outer div behaves normally and takes the height of the content. But I need the imgs to be inline. Can anyone help me?
我有一个<div>里面有一些<img>。每个<img>都在它自己的里面<div>。问题是即使我将其高度设置为自动，外部 div 也不会自动获取内容的高度。为了显示内联的内部 div，我将它们设置为float: left. 但是，如果我删除浮动，外部 div 行为正常并占用内容的高度。但我需要 imgs 是内联的。谁能帮我？
HTML:
HTML：
<div id="gallery">
<div class="gal-foto">
<img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
</div>
<div class="gal-foto">
<img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
</div>
</div>
CSS:
CSS：
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
}
.gal-foto {
float: left;
margin: 3px;
position: relative;
}
.gal-img {
display: block;
max-height: 150px;
max-width: 150px;
}
回答by Vikas Ghodke
See the Demo here. Just add overflow: auto;to your main container.
在此处查看演示。只需添加overflow: auto;到您的主容器。
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
overflow: auto;
}
回答by Ben Barkay
Add the following:
添加以下内容：
CSS:
CSS：
.clearer { clear: both; }
HTML:
HTML：
<div id="gallery">
....
<div class="clearer"></div>
</div>
回答by Tepken Vannkorn
Add clearfix class to your main container:
将 clearfix 类添加到您的主容器：
.clearfix:before,
.clearfix:after {
content: '<div class="clearfix" id="gallery">
...
</div>
20';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
Call it in your main container:
在主容器中调用它：
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
overflow: auto;
}
回答by Satyam Saxena
Just add overflow: auto;like below:
只需添加overflow: auto;如下：
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
height: auto;
margin-top: 20px;
padding: 15px;
overflow:hidden;
}
回答by Falguni Panchal
回答by Aneesh
Add this to your css file :
将此添加到您的 css 文件中：
#gallery:after{
content: " ";
display: table;
clear: both;
}
Now, before closing each div, add this statement :
<div class="clear"></div>
现在，在关闭 each 之前div，添加以下语句：
<div class="clear"></div>
回答by Yubin Duan
one method :set .gal-fototo display: inline-block
一种方法：设置.gal-foto为display: inline-block
or you can clearfix #gallery,add these
或者你可以 clearfix #gallery，添加这些
