如何使div垂直展开以包裹其内容？

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

如何获得block DIV向下延伸，以与图片？

感谢

来源

2010-04-10 MalcomTucker

你是如何动态地添加图像，使用的appendChild？ – 2010-04-10 19:29:56

当你浮动一个元素时，你正在观察的问题就会发生，它会将元素从正常的元素流中取出（通过正常流动，我的意思是元素不带样式的方式）。当你浮动一个元素时，其他元素仍然处于正常流程中将简单地忽略它，并且不会为它腾出空间，这就是为什么block div不能延伸图像的整个高度。

有几种不同的解决方案：

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>

两者都会工作，但我更喜欢第一个解决方案。

来源

2010-04-10 19:47:46 wsanville

溢出：隐藏作品一种享受，谢谢 – MalcomTucker 2010-04-10 20:22:00

刚刚遇到此修复程序，并完美地工作@wsanville。这是第一个选择。谢谢，投票 – 422 2011-08-23 00:25:33

它没有任何意义，为什么溢出隐藏使块扩大到必要的高度，而不是隐藏溢出的div？ – PedroD 2015-09-11 14:13:02

-2

我有一个扩展（水平和垂直），这取决于我有什么在它div标签。我有：

<div id="summary" style="float:right;margin:5px 5px 0;" ALIGN="right">

我也把其内一个表来保存我的所有信息：

<table style="margin-left:1em; border:2px solid #000000; background-color:#f2f2f2; padding:1px; float:center; clear:right; font-size:85%;">

来源

2010-04-10 19:29:57 Kyra

“float”属性没有“中心”值。 – demonkoryu 2011-06-14 13:54:41

在CSS文件中添加此：

.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;} 
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */

并添加 “group”班级到您的block格，所以浮动清零：

<div class="block group"> 
...

来源

2010-04-10 19:30:12 remi

REMOVE float:left从影像风格和楷书

块样式（集装箱型）ADD display:inline-block;height:Auto

来源

2012-10-17 14:00:04

非常棒的奥托。这是唯一能够使用文章标签容器的工具，即使使用清除div也不会展开。 – BenRacicot 2014-04-03 17:51:05

WOOT !!!这很棒！ – 2016-04-05 17:31:34

如何使div垂直展开以包裹其内容？

回答

相关问题