Как расположить блоки в шахматном порядке?

Question

[Сергей Софьичев]

Имеется такой список:

<ul>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
  <li>
    <img src="blabla.jpg" style="display:block">
    <span>текст</span>
  </li>
..........
</ul>

Собственно вопрос: Как разместить блоки в "шахматном порядке"? т.е. в таком :


Где черные квадраты это элементы списка(li), а белые - пустое пространство.

Answer 1

[Сергей Горячев]

Где черные квадраты это элементы списка(li), а белые - пустое пространство.

Честно говоря, это полный бред.

https://jsfiddle.net/9efs0kmf/
Видно ж, что используются четные и нечетные, в чем проблема.

.block:nth-child(even) {
  background: #000;
}
.block:nth-child(odd) {
  background: #fff;
}

Либо на jQuery добавить после каждого li еще один li.
https://jsfiddle.net/o50bog4c/

$('ul li').after('<li class=adding></li>');

Comments

[ivan1kazantsev]

Он вроде как хочет, чтобы белым было просто пустое место, а не элемент ;)

[ivan1kazantsev]

Sergey Goryachev: после скрина он дополнил ;)

Где черные квадраты это элементы списка(li), а белые - пустое пространство.

[Сергей Горячев]

ivan1kazantsev: А, вижу. Ну, странное какое-то желание.

[Сергей Горячев]

ivan1kazantsev: Я делал, когда не было дополнения написано.

[Ярослав Иванов]

Sergey Goryachev: https://jsfiddle.net/space2pacman/9efs0kmf/3/ может имеллось ввиду, что там где пусто должно быть видно бэкграунд ?) но об том можно только гадать

[ivan1kazantsev]

Ярослав Иванов: но, скорее всего, он хочет видеть вместо белых областей отступы между блоками ;)

[Ivan Stroykin]

Мне одному интересно какая разница, будут там элементы или пустое пространство? И так и так суть останется неизменной)

[Сергей Горячев]

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

[Сергей Софьичев]

Sergey Goryachev: не я хочу((

[Сергей Горячев]

Сергей Софьичев: Ты б хоть цель описал толком, а то сидим гадаем.

[Сергей Горячев]

Сергей Софьичев: https://jsfiddle.net/o50bog4c/