Div没有高度，即使它有内容 [英] Div has no height even if it has content

问题描述

我有一个< div> 其中有一些< img> 每个< img> 在它自己的< div> 问题是，外部div不是自动采取内容的高度，即使我设置它的高度为自动。为了显示内部div，我将它们设置为 float：left 。但是如果我删除浮动外部div的行为正常，并采取内容的高度。但我需要imgs内联。谁能帮助我？

JSFiddle

$ b

HTML ; div id =gallery>
< div class =gal-foto>
< img src =http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpgclass =gal-img>
< / div>
< div class =gal-foto>
< img src =http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpgclass =gal-img>
< / div>
< div class =gal-foto>
< img src =http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpgclass =gal-img>
< / div>
< div class =gal-foto>
< img src =http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpgclass =gal-img>
< / div>
< div class =gal-foto>
< img src =http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpgclass =gal-img>
< / div>
< / div>

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; 
} 
  

解决方案

http://jsfiddle.net/WVL9a/

添加以下内容：

CSS：

  .clearer {clear：both; } 
  

HTML：

< < div id =gallery>
....
< div class =clearer>< / div>
< / div>


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?

JSFiddle

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, 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/

Add the following:

CSS:

.clearer { clear: both; }

HTML:

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>

这篇关于Div没有高度，即使它有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！