Как разбить список HTML, используя только CSS

Question

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

Я создал пример того, как я в настоящее время делаю это с таблицами на JSFiddle.net ...

http://jsfiddle.net/9W33K/

Answer 1

Существует довольно подробное (хотя и несколько более старое) руководство, на которое я смотрел ранее: CSS Swag: Многостолбцовые списки

Answer 2

Вы можете имитировать таблицу HTML, используя свойство css display:table.Вы сможете заменить эти <tr> и <td> на <div>.

Более подробная информация здесь: http://www.w3.org/TR/CSS2/tables.html#table-display

Answer 3

Есть два способа, которыми я могу думать о том, что вы можете сделать это.

1. Использовать поплавки
2. Использовать CSS3 столбцы

С поплавками вы получите такой шаблон:

Item 1 Item 2
Item 3 Item 4

С помощью CSS3 вы не получаете поддержки браузера (без поддержки IE до IE10).

Fiddle с обоими примерами: http://jsfiddle.net/DThhT/1/