Display: table-cell с несколькими строками (столбцы с одинаковой высотой, несколько строк)

Учитывая список:

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

И этот CSS:

ul { display: table; width: 600px; }
li { display: table-cell; width: 33%; }

Ожидалось бы 3 строки из 3 столбцов, каждый из которых шириной 200 пикселей. Но кажется, что ширина li игнорируется.

Можно ли форсировать строки с помощью display: table-cell без добавления дополнительной разметки?

Edit: Кроме того, я использую table-cell, потому что я хочу, чтобы целая строка имела одинаковую высоту (несмотря на меняющийся контент), так как я хочу поместить что-то во все три ячейки в каждой строке, но внизу нижней ячейки. Это путаное предложение, которое я знаю.

В основном я хочу превратить связку li в столбцы с одинаковой высотой, но с несколькими строками только с использованием CSS. Все решения столбцов с одинаковой высотой, которые я видел, не могут это сделать.

Ответ 1

Это решение, которое я придумал.

Разметка слегка изменена, чтобы удалить пробелы. Это связано с тем, что с li, установленным на display: inline, между ними встанет новая строка.

Ответ 2

Вы можете передать display:inline-table вместо display:table-cell в LI. Напишите вот так:

ul { display: table; width: 600px; font-size:0;}
li { display: inline-table; width: 33%;background:red; font-size:15px;}

Отметьте http://jsfiddle.net/56FGT/1/

Ответ 3

Если вы хотите, чтобы css отображал 3 <li> в одной строке шириной 200px в том же <ul>, вы можете попробовать что-то вроде этого с помощью вашего выше html:

ul { list-style: none outside none; width: 600px; }
li { float: left;display: block;width: 200px; height: 33px; }

Демо

Ответ 4

Я думаю, что нет семантического решения. Он должен быть контейнером-контейнером для каждого набора элементов, чтобы применить к ним одну и ту же высоту. Но можно решить проблему дизайна (вроде сделать сетку) вот пример, как это сделать: несколько строк с одинаковой высотой в строке

Ответ 5

Я использую display: inline-block и vertical-align: top

Но если вы хотите, чтобы фон был растянут с высотой, javascript - это единственный способ (о котором я могу думать)

Ответ 6

Если вы не можете изменить разметку, это можно сделать без подделки таблицы. Вы можете сделать элементы списка display:block вместо display:table-cell.

Кстати, 33% 600px не 200 пикселей. Используйте 200px!

Edit:
Если вы знаете, какова максимальная высота содержимого, вы можете использовать его как высоту для всех элементов списка, и использовать выравнивание по вертикали или выравнивание по вертикали. (Но поскольку это не вариант, решения, которые не меняют разметку, отсутствуют.)