如何让div垂直展开来包装其中的内容？
如何让div垂直展开来包装其中的内容？
提问于 2010-04-10 19:21:42
我有一个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？
谢谢
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-04-10 19:47:47
您观察到的问题发生在您浮动一个元素时，这会使它脱离正常的元素流(所谓正常流，我指的是元素在没有样式的情况下显示的方式)。当你浮动一个元素时，仍然在正常流程中的其他元素将简单地忽略它，并且不为它腾出空间，这就是为什么你的block div不会扩展你的图像的整个高度。
有几种不同的解决方案：
1)在block类中添加规则overflow: hidden;：
.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>两种方法都可以，但我更喜欢第一种解决方案。
Stack Overflow用户
发布于 2012-10-17 14:00:04
从图像样式中删除float:left，从块样式中删除height:Auto
在块样式(容器样式)中添加display:inline-block;
Stack Overflow用户
发布于 2018-05-29 15:50:10
我也有同样的问题。通过将包装器元素的显示设置为"table“，我让包装器元素包装内容。所以根据你的情况试一试
.block {padding:10px; margin-top:10px; height:auto; background- color:#f9f9f9; display: table;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2614619
复制相关文章
相似问题
腾讯云开发者
