css - 如何使 div 垂直展开以将内容包裹在其中？

Question

我有一个 div，它包装了一些动态生成的图像。我不知道图像列表有多高。我的问题是包含动态生成的图像的 div 的行为不像它包含任何内容 - 我希望它扩展到图像列表的高度。每张图片本身都包裹在一个 div 中。

这是包装 div:

.block { padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }

这是为(其中一个)图像动态生成的标记:

<div class="block">
<div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="45.jpg" BORDER="0"/></div>
.....

如何让 block div 向下扩展图像？

谢谢

Answer 1

您观察到的问题发生在您 float 一个元素时，这使它脱离了元素的正常流动(所谓正常流动，我指的是元素在没有样式的情况下出现的方式)。当您 float 一个元素时，仍在正常流动中的其他元素将简单地忽略它并且不会为它腾出空间，这就是为什么您的 block div 不会扩展图像的整个高度。

有几种不同的解决方案:

1) 添加规则overflow: hidden;到block类:

.block { overflow: hidden; padding:10px; margin-top:10px; height:auto; background-color:#f9f9f9; }

2) 在你的图片后面添加一个元素来清除 float :

<div class="block">
    <div style="float: left; padding: 2px 2px 2px 2px;"><IMG SRC="images/login1.png" BORDER="0"/></div>
    <div style="clear: both;"></div>
</div>

两者都可以，但我更喜欢第一种解决方案。