無序列表Clearfix

我有一個無序列表，每個列表元素包含一張照片和標題。我的CSS設置網格爲一個網格，其中每行包含三張照片。有時標題（或照片標題）比照片的寬度更長，並且必須跨越兩行。在某些情況下，當文本跨越2+行時，它下面的列表元素被推到右邊，列表中有一個很大的差距。唯一適用於我的修補程序是在每三個元素後添加以下HTML <div style="clear:both"></div>。這個問題可以在列表元素的第三行中看到。我試過研究這個問題，但還沒有找到一個只有CSS的方法。在我的示例代碼中，我應用了CSS clearfix類，但它似乎沒有任何效果。無序列表Clearfix

我正在使用最新版本的Google Chrome瀏覽器。

這裏是我的代碼：http://jsfiddle.net/NVveP/1/

來源

2012-06-20 musubi

這是好嗎？ http://jsfiddle.net/thirtydot/NVveP/2/。如果需要，我會在明天寫一個實際的答案。 – thirtydot

是的，這是完美的作品。謝謝！這個無序列表包含在一個div中。在我的原始佈局中，div被左移，所以列表也必須左移。從那以後，我決定將我的佈局更改爲非浮動div，所以這就是爲什麼刪除「float：left」css屬性可以解決我的問題。如果我保留原始佈局，並且需要將列表懸浮起來，那麼解決方案是什麼？ – musubi

「在我原來的佈局中，div被左移，所以列表也必須左移。」 - 列表不需要浮動。一個浮動元素（例如外部'div'）將包含其他浮動元素。如果你之後改變了你的外部'div'而不是浮動的，那麼你必須以其他方式包含浮動內容，例如將'clearfix'類添加到外部'div'。 – thirtydot

有兩個float: left和display: inline-block將有效抵消display: inline-block，因爲float: left forces display: block。

因此，刪除float: left允許display: inline-block工作，這與vertical-align: top相結合是如何實現您所需的佈局。

參見：http://jsfiddle.net/thirtydot/NVveP/3/

我還添加了一個黑客，使在IE7 display: inline-block工作，如果該事項。

用浮動來做到這一點會更困難。你需要的東西的影響：

li:nth-child(3n+1) { 
    clear: both; 
}

這有問題，不適用於IE7/8等舊版瀏覽器。幸運的是，沒有必要擔心這個問題，因爲display: inline-block是這裏的解決方案，不是浮動的。

來源

2012-06-20 09:24:16 thirtydot

無序列表Clearfix

回答

相關問題