Дисплей: таблица-ячейка в новой строке

Вот пример кода для того, что я имею в виду:

HTML

<ul class="table">
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
  <li class="table-cell"></li>
</ul>

CSS

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  width: 25%;
}

Q: Как я могу сделать третий и четвертый <li> (ячейки таблицы) в новой строке с шириной: 50% каждый?

Q: Есть ли способ использовать только CSS, а не jQuery или Javascript?

Ответ 1

Простой ответ: вы не можете, по крайней мере, не со списками. Смежные элементы с их дисплеем, установленными на table-cell, рассматриваются как принадлежащие к одной и той же строке (даже если элемент строки не указан, для вас будет создан анонимный). Поскольку спискам не разрешено содержать какие-либо другие теги между ul и li, это просто невозможно в списках. Вам придется использовать либо разную разметку, либо различные стили.

Вот ваши варианты, если вы не хотите изменять разметку.

Встроенный блок в элементах списка: http://jsfiddle.net/XNq74/1/

li {
    display: inline-block; /* could use floats here instead */
    width: 40%;
}

Столбцы CSS будут разумным выбором: http://jsfiddle.net/XNq74/

ul {
    columns: 2;
}

http://caniuse.com/#feat=multicolumn

Flexbox также будет работать и может использоваться в комбинации с встроенным блоком: http://jsfiddle.net/XNq74/2/

ul {
    display: flex;
    flex-flow: row wrap;
}

li {
    flex: 1 1 40%;
}

http://caniuse.com/#search=flexbox

Ответ 2

ul.table li+li+li { /** your CSS code **/ } This one is for the third element


ul.table li.last { /** your CSS code **/ }   This one is for the fourth element