如何使div垂直扩展以将内容包装在其中？ [英] How to make a div expand vertically to wrap the content within it?

问题描述

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

I have a div which wraps a number of images that are generated dynamically. I don't know how high the list of images is. My problem is the div that contains the dynamically generated images doesn't behave like it is housing any content - I want it to extend to the height of the list of images. Each image is itself wrapped in a div.

这是包装div：

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

这是为图像（其中之一）动态生成的标记：

This is the markup dynamically generated for (one of) the images:

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

如何获取块 div向下扩展图像？

How do I get the block div to extend down with the images?

谢谢

推荐答案

您正在观察的问题是在浮动元素时发生的，这使它脱离了元素的正常流动（通过正常流动，我的意思是元素将以没有样式的方式出现）。当您浮动一个元素时，仍在正常流程中的其他元素将简单地忽略该元素并且不为其留出空间，这就是为什么您的 block div不会扩展完整元素的原因。

The problem you're observing happens when you float an element, which takes it out of the normal flow of the elements (by normal flow I mean the way the elements would appear with no styling). When you float an element, the other elements still in the normal flow will simply ignore it and do not make room for it, which is why your block div does not extend the full height of your image.

有几种不同的解决方案：

There are a few different solutions:

1）添加规则溢出：隐藏； 到块类：

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

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

2) Add a element after your image that clears the floating:

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

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

Both will work, but I prefer the first solution.

这篇关于如何使div垂直扩展以将内容包装在其中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！