Как изменить порядок горизонтального списка li?

Question

Я делаю несколько коробок по списку HTML, каждый из которых будет содержать изображение и текст, но вся коробка должна содержать ссылку. В любом случае список по горизонтали, как это:

li{float:left;} 

Video1 | Видео2 | Видео3 | Видео4 |

Video5 |

Но как мой список будет 2 строки, поэтому я хочу, чтобы это было так:

Video1 | Видео3 | Видео5 |

Видео2 | Видео4 |

Как это сделать? Вот демо: 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 элементов и дать им display: block и width 100%, так что они принимают на всю ширину

Answer 3

Вы можете использовать использование CSS3 компоновки Multicolumn

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

Обратите внимание, что это не будет работать в IE8 и до, хотя.

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

Вы можете использовать этот яваскрипт polyfill для старых браузеров - http://jsfiddle.net/gryzzly/Umz6a/