清除嵌套浮動圖像

Question

我創建了一個平鋪的網格圖像，非常類似於帶有網格縮略圖的圖像庫，並且我需要在3張圖像後將圖像包裝到下一行。所以我漂浮了一堆div，每個div都包含一個圖像，然後在三張圖像之後手動清除浮動。

問題是我正在一個相當複雜的已有模板中工作，該模板已經使用float來安排一切。清除網格中的浮點值會擾亂整個頁面，可能是因爲它清除了頁面中的每個浮點值。我能做什麼？

我正在通過插入一個空白div來清除浮動。即：

<div style='clear:right'> 

可能清除浮游物的其他方法之一更好地工作？

Answer 1

如果您的標記，像這樣：

div 
img 
img 
img 
row break 
img 
img 
img 
... 

然後，你需要每三個街區後補充一點：

<br class="clear" /> 

但是，如果你的標記是這樣的：

div 
div 
    img 
    img 
    img 
div 
    img 
    img 
    img 
... 

..然後您只需將以下.clear類應用於您的內部DIV。

無論哪種方式，添加到您的樣式表：

.clear:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
* html .clear { height: 1%; } 
*:first-child+html .clear { min-height: 1px; } 

你可以使用這個類包含花車所有其他元素。

Answer 2

如果IE> = 8支持對你來說很好，你可能要考慮使用display: table而不是浮點數。既然你想顯示一個網格，這是更合適的方式。

http://www.quirksmode.org/css/display.html#table

Answer 3

我會嘗試使用display: inline-block;樣式包含每個圖像元素。爲一個容器的HTML代碼 示例：

 
<style> 
.figure { 
    display: inline-block; 
} 
</style> 

<div class="figure"> 
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" /> 
</div> 

現在有使用這種與IE6，IE7和Firefox 2幾個缺陷：

• IE 6和7將只具有hasLayout的風格聯元素觸發，我的意思是你會看到inline-block的行爲如果你這樣做：

 
<!--[if lte IE 7]> 
.figure { 
    display: inline; 
    zoom: 1; /* triggering hasLayout */ 
} 
<![endif]--> 

• Firefox 2的不理解display: inline-block;所以你必須通過另一個顯示指令先於後者：

 
.figure { 
    display: -moz-inline-stack; 
    display: inline-block; 
} 

• 現在的Firefox 2會惹惱你一點。首先，你必須在你的.figure元素中只有一個子元素，否則孩子會......疊加。所以，如果你有你的形象下一個傳奇，插入div.figure和IMG + P

 

    <div> 
     <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" /> 
     <p>Second child of .figure>div and not .figure</div> 
    </div> 
</div> 

二（仍然只在FX2）之間的DIV，你會不時通知的時間，你可以」不再選擇-moz-inline-stack'元素內的文本，也不點擊它可能包含的鏈接。解決方法是定位相對增加DIV：

 
    .figure div { 
     position: relative; 
    } 

當然對IE6/7的條件註釋常規CSS後才能發生，否則它會幫助不大。

最後，如果沒有優雅的解決方案適用於您，請使用TABLE。一個只有td和no的簡單表格。如果發生的是：

• IE6和7不喜歡display: table-sth
• 您的CMS會導致問題是什麼，否則正常工作在另一個網站
爲 inline-block
• Firefox 3的支持是沒有幫助的

比是這對你使用一個表，沒有半溶液，產生的問題，以一半的用戶大家好;）

Answer 4

1. 創建一個合適的容器的div（如果 你不已經有一個）
2. 設置限制性寬度上 div容器 - 相當於相同 是3圖像佔用。
3. 允許所有圖像浮動 - 他們會自動換行 。
4. 設置與 'overflow：hidden'的容器格，它將清除 爲你浮動。

的簡化版本，可能是這樣的：

<style> 

div#container { 
    overflow: hidden; 
    width: 300px; 
} 

div#container img { 
    float: left; 
    width: 100px; 
} 

</style> 

<div id="container"> 

    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 


    <img src="" /> 
    <img src="" /> 
    <img src="" /> 

</div>