如何使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垂直展開以包裹其內容？

回答

相關問題