对齐的div垂直，同时保持它们有序的名单式“ [英] Aligning divs vertically while keeping them ordered in a 'list-style'

问题描述

我已经到了一个地步，我实在想不出这个问题的任何解决方案了。我想实现的是： 我在一些div的填补内容，例如值从0-10。然后，将它们显示出来，它们应列的方式，是响应于用户的窗口大小。 在大屏幕上就应该是这样的：

I've come to a point where I really can't think of any solutions for this problem anymore. What I want to achieve is: I fill content in some divs, for example values from 0-10. Then, when showing them, they should be listed in a way that's responsive to the users window size. On A Big screen it should look like this:

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

和上一个较小的屏幕：

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

我试图通过赋予的div的浮动：左; 属性，这给了我这样一个输出：

I tried it by giving the divs the float: left; Property, which gives me an output like this:

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

问题是：该顺序是不一样的，在期望的输出，并且：所述行被填充第一，不是COLS。 是否有人知道一个解决方案，我们可以如何实现这样的事情，只有CSS和HTML？

Problem is: the order is not the same as in the expected output, and: the 'rows' are being filled first, not the cols. Does anybody know a solution how one can achieve something like this with only css and html?

推荐答案

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

Modern solution is CSS Multi-column module. You could use it like this:

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

http://jsfiddle.net/EN92F/

检查支持，IE10 +。

如果它不支持的浏览器（IE8为例），将适度降低单栏布局，喜欢这里的 http://jsfiddle.net/EN92F/1/ ，这并不坏。

If it is not supported by the browser (IE8 for example) it will gracefully degrade to single column layout, like here http://jsfiddle.net/EN92F/1/, which is not that bad.

延伸阅读使用CSS多列布局的。

这篇关于对齐的div垂直，同时保持它们有序的名单式“的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！