如何使div垂直展開以包裹其內容？

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

我有一個擴展（水平和垂直），這取決於我有什麼在它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%;"> 

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 class="block group"> 
... 

Answer 4

REMOVE float:left從影像風格和楷書

塊樣式（集裝箱型）ADD display:inline-block;height:Auto