Как это сверстать?

Question

[Айбек Жаксыбаев]

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

пробовал делать с помощью margin-left но блоки сжимаются в размере.
Спасибо

Comments

[Антон Иванов]

Вы бы сначала попробовали, выложили код, который у вас получился, а потом уже спрашивали. А то получается - это задание, а не вопрос. Жалоба на вас.

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

Сверстать то можно абсолютным позиционированием либо через js делать просчет. А вообще дизайн ужасен. Дизайнер банальных правил не знает и пытается выпендриться. Лучше переделать.

[Unknown]

Ярослав Иванов, вы бы хотели чтобы все в строчку было? Сейчас многие, кто хочет выделиться, уходят от типичного позиционирования

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

Richard, в первую очередь должно быть информативно и читабельно а уже потом "вау эффекты". Тут же глаз с ума сходит и не понимает за что зацепиться.

[Unknown]

Ярослав Иванов, с тем что нет грамотного фокуса на контенте я согласен, но я не об этом говорил

Answer 1

[ElijahTr]

Например: https://codepen.io/elijah_tr/pen/zPPBWe

Answer 2

[display: block]

https://codepen.io/anon/pen/aVKzeP
грубый черновик

Comments

[Anton Filippov]

зачем такая большая мусорная хтмл структура для такого простого задания
вон у ElijahTr и garfildalex6 норм

[display: block]

flppv,
Лучше, конечно. Ответ был на скорую руку.
В раздел треша, можно следующий пример придумать в горячке :)
https://codepen.io/anon/pen/LOrLyW

Answer 3

[garfildalex6]

https://jsfiddle.net/garfildalex/nngwd5rb/

Answer 4

[Евгений Вольф]

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

Варианты:
1. Grid, поддержка браузерами (75%)
2. Абсолютное позиционирование элементов

Answer 5

[Олег]

Как вариант на скорую руку https://jsfiddle.net/Politonius/nxtmcybe/1/
Решение мое. ХЗ есть в сети подобное или нет)

Answer 6

[Sergey Ch]

1. Блоки абсолютно позиционируйте
2. Цифры через псевдо элемент - before/after и итерируйте через CSS count - тогда при добавлении новых блоков цифры будут подставляться автоматом