Как реализовать поочерёдное заполнение разметки на чистом css?

Question

[xonar]

Здравствуйте.

Есть блок с классом user__list куда при определённом действием с сервера приходят параметры и внутри создаётся блок с user__avatar. И их может быть там любое количество.

user__list выстраивает эти блочки внутри так, как они приходят, то есть по DOM дереву.

<div class="user__list">
  <div class="user__avatar"></div>
  <div class="user__avatar"></div>
</div>

Но у меня стоит задача сделать так, чтоб был блок Info__block и справа и слева от него был блок user__list и блочки внутри этого user__list появлялись, то с одной стороны слева, затем справа, затем опять слева и т.д.

Как реализовать такое на css??? Скорее всего никак, но может кто сталкивался с таким, что посоветуете (пока без js) ?



Вкратце, нужно обтекание элементов вокруг центрального блока и с приоритетом размещения этих элементов от центрального блока по краям (слева, справа, слева, справа и т.д.).

Answer 1

[Ankhena]

Как-то так: https://jsfiddle.net/rfjd3ute/ нo придется с сервера или на js раздавать им order

Comments

[xonar]

Спасибо, буду за ПК опробую ваш вариант и дам ответ)

[Ankhena]

xonar,

и дам ответ

да неееет, ответы - это я )))))))))))))

[xonar]

Ankhena, Такс, изучил ваш вариант. Я так и хотел, но не хотел данный вариант, так как с сервера нужно было чтот тянуть для приоритета(раставления блочков). Но, вы навели на мысль.

Я сделал так.

На сервере, просто продублировал функцию, которая выводит всё это в отдельный блок. И у одного родителя nth-child(event) сделал, а у другого odd. Так я смог решить проблему) В одном блоке показываются аватарки 1, 3, 5 а у другого 2, 4, 6. Небольшой костыль, но самое то)

Спасибо за помощь)

[Ankhena]

xonar, если в разные блоки, то зачем even и odd, так просто на сервере можно разложить в разные блоки. Собственно и мой вариант тогда тоже мало нужен.
Но хорошо, что решили.

[xonar]

Ankhena, Есть проект, который написан на Реакте (писал не я), но для своих целей нужно было сделать то что я и хотел. Так как не обладаю полностью знаниями реакта от и до, то решил не париться и костыль сделать. Когда навыки позволят сделать правильно, то естественно переделаю))

[Ankhena]

xonar, разумный подход ))

[xonar]

Ankhena, Ага)) Но, ваш ответ натолкнул на эту мысль, так что и ваша заслуга тоже есть)

Answer 2

[xonar]

Я сделал так.

На сервере, просто продублировал функцию, которая выводит всё это в отдельный блок. И у одного родителя nth-child(event) сделал, а у другого odd. Так я смог решить проблему) В одном блоке показываются аватарки 1, 3, 5 а у другого 2, 4, 6. Небольшой костыль, но самое то)