如何更改水平li列表的顺序

Question

我正在通过HTML列表制作几个框，每个框都包含一个图片和文本，但整个框应该有一个链接。无论如何，列表是水平的，如下所示：

li{float:left;}

Video1|Video2|Video3|Video4|

视频5|

但由于我的列表将是2行，所以我希望它是这样的：

视频1|Video3|Video5|

视频2|Video4|

我该怎么做？以下是演示：http://jsfiddle.net/KjcKR/

我知道它可以通过表格制作，但有人告诉我，这些天表格并不是那么标准，这就是为什么我想通过列表来制作它

Answer 1

您可以使用列宽http://jsfiddle.net/KjcKR/1/

ul {
    width:800px;
    background-color:#900;
    list-style-type: none;
    -moz-column-width:190px;
    -webkit-column-width:190px;
    column-width:190px;
}

Answer 2

您可以更改ul的宽度，使其自动将3个元素放入第一行，也可以将列表拆分为两个ul元素，并为它们提供100%的display: block和width，使它们获得全宽度

Answer 3

您可以使用CSS3多列布局

ul {
    column-width: 380px;
    -webkit-column-width:380px;
    -moz-column-width: 380px;
    height:440px;
}  

请注意，这在IE8及之前版本中不起作用。

http://jsfiddle.net/tutspack/8jw6r/

您可以将此javascript polyfill用于较旧的浏览器-http://jsfiddle.net/gryzzly/Umz6a/