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

我不知道每张图片的width和height，因此我无法为 height #boximmagini添加{{1}}的固定度量STRONG>。此外我认为高度必须自动改变......

为什么不起作用？

谢谢！

Answer 1

将overflow: auto添加到#boximmagini

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

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

div的高度（里面是图像）不会自动改变

1 个答案: