清除每一行中的最後一個浮動元素

Question

我有一組div浮動左側的變量高度。當一行中有太多的div表示時，下一個div會換行（應該如此）。我遇到的問題是，新行開始於新行的偏移x位置，使得div位於上一行的最後一個div的下面，並且後面沒有較高的div - 通常會留下大量餘量在左側。

div.entry 
{ 
    float: left; 
    width: 180px; 
    padding: 10px; 
} 

我基本上希望讓每個「行」的最後div.entry（它換到一個新行前的一個）清除浮動，從而使浮動的div的下一行都統一到相同的高度，並且在左側沒有相當大的間隙。畫報在ASCII：

我期待發生的事情：

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 
+-----+ +-----+ +-----+ +-----+ 
| E | | F | | G | | H | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 

居然會發生什麼：

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ +-----+ +-----+ 
       | E | | F | 
       |  | |  | 
       +-----+ |  | 
         +-----+ 
+-----+ +-----+ 
| G | | H | 
|  | +-----+ 
+-----+ 

邁克爾

Answer 1

我曾經有過這個問題，我覺得我周圍有我爲div設置最小高度屬性。

這給了我：

+-----+ +-----+ +-----+ +-----+ 
| A | | B | | C | | D | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 
+-----+ +-----+ +-----+ +-----+ 
| E | | F | | G | | H | 
|  | |  | |  | +-----+ 
+-----+ |  | +-----+ 
     +-----+ 

Answer 2

如果float: left是不是強制性的，總是有display: inline-block這將是更適合這份工作。由於「內聯流程」已經可以像你想要的那樣工作了。

.item { 
    display: inline-block; 
    vertical-align: top; 
    width: 300px; 
} 

這在當前的瀏覽器中表現得非常正常。請參閱fiddle。

如果你想用舊的瀏覽器的兼容性，對描述的情況Mozilla的博客一篇好文：http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

其他解決方案（不完全地跨瀏覽器）是添加

.item:nth-child(4n+1) { clear: left; } 

檢查這http://jsfiddle.net/AfUL3/