css - 垂直对齐 div，同时保持它们以“列表样式”排序

Question

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

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

在较小的屏幕上：

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

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

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

score 3 · Accepted Answer

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

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

检查支持，IE10+。

如果浏览器（例如 IE8）不支持它，它会优雅地降级为单列布局，就像这里http://jsfiddle.net/EN92F/1/一样，这还不错。

1 回答 1