Как сверстать такой блок?

Question

[Gghostt]

Здравствуйте, подскажите как лучше заверстать данный блок.
На position absolute? Или как?
И как лучше адаптировать.
Спасибо.
Именное как расположить картинки по кругу.

Comments

[WapSter]

На position absolute

[Gghostt]

Arman Hovhannisyan, звучит неплохо, спасибо

[WapSter]

Arman Hovhannisyan, и это проще?) жестко. Там есть основной контейнер, и центрированный блок (человек) относительно этого блока, все эти картинки проще по позициям раскидать, чем строить сетку. А на счет адаптива, тут до и включая планшетную версию в вертикальном положении максимум, дальше в виде списка картинки делать в две колонки с последующим преходом в одну.

[WapSter]

Arman Hovhannisyan, я отлично знаю flexbox, но чтобы грамотно составить сетку под это дело, в основной блок нужно сунуть три обертки по вертикали, для верхних картинок, срдених и нижних, для каждой картинки. с нижним блоком, двигать элементы при помощи отрицательных марджинов, или трансформом, И вообще не вижу того факта как это все поможет адаптировать. Либо по горизонтали три обертки (этот вариант предпочтительне) но опять же внутри блоков, придется картинки двигать марджинами и никаких перспектив для безболезненной адаптации.

[WapSter]

Arman Hovhannisyan, даже хз как такое поведение можно добиться только одними align-self, может просветишь даже самому интересно.

[WapSter]

Arman Hovhannisyan, смотрю с телефона и вижу фигню, но в остальном как я и предполагал, все фигово выставлено, и выравнивать задолбаешься)

[WapSter]

Arman Hovhannisyan, верстать научишься потом советы давай) А так, сойдет для быстро накидать, но точности 0

[WapSter]

Arman Hovhannisyan, чем мне заниматься я сам разберусь. Я от тебя так и не увидел достойного варианта на флексах. Но при этом ты гнул свою палку. Как я уже говорил хотелось бы это увидеть может я научусь чему-нибудь. Но походу я так и буду видеть пустой трёп вместо результата) Не советуй людям ещё раз говорю, то что сам не пробовал или не смог бы реализовать.

Answer 1

[WapSter]

изменение состояния происходит при разрешении 410px тебе нужно примерно так же сделать, но уже со своими размерами. Пример абстракция, по этому точное расположение кругов по диагоналям блока не высчитывал.

Answer 2

[Арсений Матыцин]

Выстраиваешь элементы так, как они должны быть на мобилке, а для десктопа (да и таблетки тоже) пишешь стили на position:absolute.

Comments

[Gghostt]

Хорошо, спасибо