如何让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
复制相关文章
![[Word小技巧]如何让Word文档的内容不被复制](https://developer.qcloudimg.com/http-save/yehe-7215932/dbdff3e8d00ff36e0cdfc5ce4153d63f.jpg)
相似问题
使柔性盒div垂直包装内容
如何让wrapper div正确地将div包装在其中？
如何让<div>随着内容的数量而垂直伸展？
Div没有覆盖其中的内容(垂直)，在div内部没有浮动。
包装div的垂直滚动
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
