浮動畫廊圖片

Question

在this gallery最後一張圖片應該浮動到左側，但它位於中間。代碼有什麼問題？

This is the whole code CSS。

This is the whole code HTML。

HTML：

<div class="text-block7" > <a href="gal/60.png" class="gal2" rel="gal"><img src="gal/thumb/60.png" alt=""></a> </div>

CSS：

#rightcolumn-12 .text-block7 { width: 239px; height: 190px; display: block; float: left; margin-top: 0px; margin-bottom: 15px;} 

Answer 1

第七屆div塊添加之前：

<div style="clear:left"></div> 

Answer 2

出現這種情況是因爲你的第4圖像具有更高的，所以第七當向左漂浮時的圖像再次砰的一聲那個元素。

爲了防止這種行爲，只需定義一個css規則，該規則在涉及的每個3n + 1 div上應用clear:left。

div[class^="text-block"]:nth-child(3n + 1) { 
    clear: left; 
} 

注：nth-child僞類目前並非IE8工作，但如果你需要絕對支持的瀏覽器，你可以簡單地使用display: inline-block和vertical-align: top而不是浮動元素