實現具有獨立行高的多列布局

Question

我試圖創建類似於新Google+版面佈局的佈局，並且類似於this question（但使用html）。

目前，Google+對每列使用1格。我試圖看看是否會有另一種方式來做到這一點。

可能Flex3的Flexbox模型將有所幫助，但其兼容性級別是...... meh。

我嘗試了內聯塊模型，但是這樣做創建的行並不是相互獨立的高度。

有現有的解決方案，但一切都需要IE10 +或IE11 +。我需要一個與IE7 +兼容的解決方案。我沒有看到每列div旁邊的東西。

有沒有人有過類似的事情？

Answer 1

CSS多列布局模塊可以做你正在尋找的東西。

http://codepen.io/cimmanon/pen/CcGlE

.foo { 
    columns: 30em; /* desired number of columns and/or width of column */ 
} 

前綴可能是必要的。 http://caniuse.com/#feat=multicolumn