如何使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>
.....

如何让blockdiv延伸到图像？

谢谢

Answer 1

当你浮动一个元素时会发生你正在观察到的问题,这会使元素从正常的元素流中流出(通过正常的流程,我的意思是元素在没有样式的情况下出现的方式).浮动元素时,仍处于正常流程中的其他元素将忽略它并且不会为它腾出空间,这就是为什么你的blockdiv不会扩展图像的整个高度.

有几种不同的解决方案:

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

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

两者都有效,但我更喜欢第一种解决方案.

Answer 2

float:left从图像样式和height:Auto块样式中删除

ADD display:inline-block;在块样式(容器样式)