網格高度問題之間的divs？

我使用float：left方法創建了使用HTML和CSS的div網格系統。網格高度問題之間的divs？

它工作正常，但是，無論何時在同一行中兩個div之間存在可變高度差異，下一個div都會從具有最大高度的div下面的最底部位置開始。

這裏的codepen： http://codepen.io/anon/pen/GJZWoX

CSS：

.parent{ 
    width:330px; 
} 

.red{ 
    float:left; 
    width:150px; 
    height:150px; 
    margin-bottom:10px; 
    margin-left:10px; 
    background-color:red; 
} 

.blue{ 
    float:left; 
    width:150px; 
    height:300px; 
    margin-bottom:10px; 
    margin-left:10px; 
    background-color:blue; 
}

有隻用css來解決這個錯誤的方法嗎？任何好的答案，將不勝感激。

這就是我在尋找：

enter image description here

謝謝

來源

2015-05-13 Dinuka

我將在Flexbox的https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

閱讀起來只有CSS這樣做將使它成爲一項非常艱鉅的任務，但有一些優秀的插件可以幫助你。也許你會喜歡** [masonry.js]（http://masonry.desandro.com/）**，這不是我的，但是這是一個很好的** [示例]（http：// codepen.io/seanmccaffery/pen/Gxtqy)** masonry.js是如何工作的。 –

不只用CSS，只用flexbox。看到我的答案。 @世人 – JohnDevelops

只是CSS？有了flexbox，你可以http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

但我會選擇Javascript作爲一個更強大（在發佈時稍微更好的瀏覽器支持）的方法。

通過JQuery砌體http://masonry.desandro.com/（從IE9 +支持）

來源

2015-05-13 14:45:32 JohnDevelops

網格高度問題之間的divs？

回答

相關問題