参见英文答案 >
CSS: DIV containing no height on float set
我有一个< div>其具有一些< img>在里面。每个< img>在自己的< div>内。问题是，即使我将其高度设置为自动，外部div也不会自动占用内容的高度。还要内联显示内部div我将它们设置为float：left。但是，如果我删除了float，外部div就会正常运行，并且占用内容的高度。但我需要imgs是内联的。有人可以帮我吗
我有一个< div>其具有一些< img>在里面。每个< img>在自己的< div>内。问题是，即使我将其高度设置为自动，外部div也不会自动占用内容的高度。还要内联显示内部div我将它们设置为float：left。但是，如果我删除了float，外部div就会正常运行，并且占用内容的高度。但我需要imgs是内联的。有人可以帮我吗
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：
#gallery {
border: 1px solid;
border-radius: 10px 10px 10px 10px;
Box-shadow: 0 0 15px rgba(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;
}
解决方法
http://jsfiddle.net/WVL9a/
CSS：
.clearer { clear: both; }
HTML：
<div id="gallery">
....
<div class="clearer"></div>
</div>
