網格視圖：未正確對齊

Question

因此，我沒有足夠的信譽點來上傳圖片，因此我會盡我所能解釋它。

在網格視圖（就像pinterest），每個職位有不同的高度。即使身高不同，所有職位都填補了他們之間的空白（即他們之間沒有差距）。

我的網站，我已經建立了下面的CSS 4個帖子水平：

.sample{ 
float:left; 
width: 24%; 
margin-right:1%; 
} 

他們排隊正常水平，但是，因爲他們有所有不同的高度，他們沒有正確對齊垂直（即很多差距）。

我不知道如何更改代碼，以便不管網格視圖中帖子的高度如何，它們總是垂直和水平排列。

謝謝。

編輯：

從桌面，請到http://sevek.staging.wpengine.com/mobile/?wptouch_preview_theme=enabled然後就調整窗口的大小，使它看起來像一個移動版本。

這（主頁）是我試圖複製的工作版本。

當您調整屏幕寬度時，所有項目都很好地對齊並且沒有間隙。現在

，請到這裏（這是我試圖修復），然後調整寬度840px：

http://sevek.staging.wpengine.com/profile/sevek/?wptouch_preview_theme=enabled

正如你所看到的，網格視圖職位不正確，有對齊是差距。

Answer 1

我試着在你的代碼上做它，但是它需要大量的清理，因爲你有很多值覆蓋！重要的，用另一個重要的等等覆蓋。我建議從零開始至少爲貴「的用戶的帖子」類，然後它的第一級子，

.userpro-posts { 
    width: 100%; 
    max-width: 700px; 
    margin: 2em auto; 
    -moz-column-count:3; 
    -moz-column-gap: 3%; 
    -moz-column-width: 30%; 
    -webkit-column-count:3; 
    -webkit-column-gap: 3%; 
    -webkit-column-width: 30%; 
    column-count: 3; 
    column-gap: 3%; 
    column-width: 30%; 
} 

.userpro-post { 
    margin-bottom: 20px; 
} 

（你可以設置你想要的欄目，但你可能需要一些JS以及用於不同的屏幕尺寸）

刪除所有不需要的代碼，並按照這個小提琴http://jsfiddle.net/jalbertbowdenii/7Chkz/。希望能幫助到你。