css - 实现具有独立行高的多列布局

Question

我正在尝试创建一个类似于新的 Google+ 布局和 this question 的布局(但使用 html)。

目前，Google+ 为每一列使用 1 个 div。我正在尝试看看是否有其他方法可以做到这一点。

可能 CSS3 的 flexbox 模型会有所帮助，但它的兼容性级别是......嗯。

我尝试了行内 block 模型，但采用这种方式创建的行不依赖于彼此的高度。

有现有的解决方案，但一切都需要 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