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

如何让block div延伸到图像？

由于

Answer 1

当你浮动一个元素时会发生你正在观察的问题，这会使元素从正常的元素流中流出（通过正常的流程，我的意思是元素在没有样式的情况下出现的方式）。当你浮动一个元素时，仍然在正常流程中的其他元素将忽略它并且不为它腾出空间，这就是为什么你的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>

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

Answer 2

从图片样式中删除float:left，从块样式中删除height:Auto

以块样式（容器样式）添加display:inline-block;

Answer 3

在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，以便清除浮点数：

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

Answer 4

我遇到了同样的问题。我通过将包装器元素的显示设置为＆＃34; table＆＃34;来获取包装元素以包装内容。所以对于你的情况，试试

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

Answer 5

在CSS中添加以下代码：

.block::after{
    content : '';
    clear : both;
    display : block;
}

它将解决您的问题。

它只是在块类之后插入一个空白。

Answer 6

我有一个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%;">

如何使div垂直展开以包含其中的内容？

6 个答案: