css - 垂直对齐 div，同时保持它们在 'list-style' 中的顺序

Question

我已经到了我真的想不出任何解决这个问题的地步了。我想要实现的是:我在一些 div 中填充内容，例如 0-10 的值。然后，在显示它们时，它们应该以响应用户窗口大小的方式列出。在大屏幕上它应该是这样的:

1 | 4 | 7 | 10
2 | 5 | 8 
3 | 6 | 9

在较小的屏幕上:

1 | 5 | 9
2 | 6 | 10
3 | 7
4 | 8

我通过给 div 赋予 float: left; 属性来尝试它，它给我这样的输出:

1 | 2 | 3 | 4
5 | 6 | 7 | 8
9 | 10

问题是:顺序与预期输出中的顺序不同，并且:先填充“行”，而不是列。有谁知道如何仅使用 css 和 html 就可以实现这样的解决方案？

Answer 1

现代解决方案是 CSS 多列模块。你可以这样使用它:

.content {
    -webkit-column-width: 80px;
    -webkit-column-gap: 5px;
}

http://jsfiddle.net/EN92F/

检查 support , IE10+.

如果浏览器(例如 IE8)不支持它，它将优雅地退化为单列布局，如此处 http://jsfiddle.net/EN92F/1/ ，这还不错。

进一步阅读 Using CSS multi-column layouts .