如何讓div浮動在一起？

Question

目標：我想讓我的div像這樣漂浮在一起。

http://jsfiddle.net/x8Abc/1/

.post { 
    float:left; 
    padding:10px; 
    margin:5px; 
    border:1px solid #000; 
    width:25%; 
} 

問題：當我在具有格之間在一其中有長度的內容，然後將其推壓在div下方到另一側這樣。

http://jsfiddle.net/W3afJ/

.post { 
    float:left; 
    padding:10px; 
    margin:5px; 
    border:1px solid #000; 
    width:25%; 
} 

我如何能實現良好包裝的佈局像jsfiddle.net/x8Abc/1/的統一？

Answer 1

在這種情況下，您需要使用display: inline-block。

修改你的CSS像這樣：

.post { 
    display: -moz-inline-stack; 
    display: inline-block; 
    *display: inline; 
    padding: 10px; 
    margin: 5px; 
    border: 1px solid #000; 
    width: 25%; 
    zoom: 1; 
} 

Here's a fiddle as well

對齊的塊垂直改變vertical-align CSS屬性，例如

.post { 
    display: -moz-inline-stack; 
    display: inline-block; 
    *display: inline; 
    padding: 10px; 
    margin: 5px; 
    border: 1px solid #000; 
    width: 25%; 
    zoom: 1; 
    vertical-align: top; 
} 

有關在IE中display: inline-block工作（如我在上面所做的）更多信息，請瀏覽：

https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

您有幾種不同的選擇：

1. 給每個帖子的固定高度，並將溢出屬性設置爲auto。這將明顯地確保每個高度都是相同的，因此避免了在兄弟旁邊浮動的問題，但會將滾動條添加到帶有大量文本的div，並將空白空間添加到很少的底部（請參閱它here）：

   .post { 
       float: left; 
       padding:10px; 
       margin:5px; 
       border:1px solid #000; 
       width:25%; 
       height: 250px; 
       overflow: auto; 
   } 
   

2. 棒與float奠定了您的文章，並確保每一行的第一篇文章被清除（see it in action）。可以實現這樣的*：

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

3. 改變你的方法來鋪設自己的帖子使用inline-block，像這樣：

   .post { 
       display: inline-block; 
       padding:10px; 
       margin:5px; 
       border:1px solid #000; 
       width:25%; 
   } 
   

還有就是你原來的例子here的叉子。我建議採用這種方法，因爲它可以讓你在你認爲合適的時候垂直對齊你的帖子，並且不會限制每個類似選項1中的副本數量。This article是一個很好的閱讀，並且詳細說明了如何即使在較舊的瀏覽器中也能正常工作。

*請注意，IE < 9將不支持nth-child僞類，因此您需要這些瀏覽器的JavaScript回退。