css - 仅在不同列中垂直堆叠 div css

Question

我有宽度相同但高度不同的 div，它们应该显示在列中， float 到它们上方的下一个 div。

fiddle :http://jsfiddle.net/kaljak/DAYSk/

Is there any way to handle that without placing them via Javascript?

我的一个想法是为列设置 div 并将 div 放入其中，但是否有另一种不添加更多标记的可能性？

提前致谢!

Answer 1

另一种可能的解决方案是使用 CSS 列。将列属性应用于容器

body {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
}

然后在 div 上使用 display: inline-block;。

示例:http://jsfiddle.net/tdwZe/

另见 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts

注意:IE10 之前的 IE 不支持 CSS 列 (http://caniuse.com/#feat=multicolumn)。