thisishappi
@thisishappi
Верстальщик=)

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

Имеется такой список:
<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>


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

Где черные квадраты это элементы списка(li), а белые - пустое пространство.
  • Вопрос задан
  • 3201 просмотр
Пригласить эксперта
Ответы на вопрос 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Где черные квадраты это элементы списка(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>');
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы