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

问题是：订单与预期输出中的顺序不同，并且：首先填充'行'，而不是cols。有没有人知道如何只用css和html实现这样的解决方案？

Answer 1

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

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

检查support，IE10 +。

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