html - div 的高度(里面是图像)不会自动改变

Question

我不明白为什么 div 的 height 不会自动改变:

<div id="boximmagini">
    <div style="border-radius: 10px; background: #646464; color: #fff; border: 1px solid #505050; margin: 10px 2%; padding: 5px; text-align:center"><h3>Clicca e ingrandisci l'immagine</h3></div>
    <div><img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 28%" /></div>
    <div><img src="http://i57.tinypic.com/33jh1zp.jpg" class="imgoverlay" style="width: 28%" /></div>
    <div><img src="http://i59.tinypic.com/4hs6c6.jpg" class="imgoverlay"  style="width: 28%" /></div>
    <span style="clear:both">
</div>

这是CSS

.imgoverlay {
            float:left;
            border-radius: 10px; 
            margin: 2%; 
        }

#boximmagini {          
            background: #a0a0a0;
            border-radius: 10px;
            border: 1px solid #505050;
            width: 100%;
        }

我不知道每张图片的宽度和高度，所以我无法为高度设置一个固定的测量值强#boximmagini。另外我认为高度必须自动改变......

为什么不起作用？？

谢谢!

Answer 1

将 overflow: auto 添加到 #boximmagini

#boximmagini {          
    background: #a0a0a0;
    border-radius: 10px;
    border: 1px solid #505050;
    width: 100%;
    overflow: auto;
}

你已经 float 了你的图像，这使得它们离开文档流并且 #boximmagini 将不会“看到”它们的高度。您需要设置该属性，以便它清除 float 并根据其内容自动调整其高度!