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

我有一个 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>
.....

我如何获得blockdiv 与图像一起向下延伸？

Thanks

当您浮动一个元素时，您观察到的问题就会发生，这会将其从元素的正常流中取出（正常流是指元素在没有样式的情况下出现的方式）。当您浮动一个元素时，仍在正常流程中的其他元素将简单地忽略它并且不为它腾出空间，这就是为什么您的blockdiv 不会延伸图像的整个高度。

有几种不同的解决方案：

1）添加规则overflow: hidden; to the block class:

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

2）在图像后添加一个清除浮动的元素：

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

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