我已经到了我真的想不出任何解决这个问题的地步了。我想要实现的是: 我在一些 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 就可以实现这样的解决方案?
最佳答案
现代解决方案是 CSS 多列模块。你可以这样使用它:
.content {
-webkit-column-width: 80px;
-webkit-column-gap: 5px;
}
检查 support , IE10+.
如果浏览器(例如 IE8)不支持它,它将优雅地退化为单列布局,如此处 http://jsfiddle.net/EN92F/1/ ,这还不错。
进一步阅读 Using CSS multi-column layouts .
关于css - 垂直对齐 div,同时保持它们在 'list-style' 中的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15409627/