Как сделать подобный таймлайн?

Question

[Дмитрий]

Давным-давно верстал макет, сделал его абы как (верстал на количество, за мелочами не следил). Решил вот теперь доделать все на качество.

В макете есть подобный таймлайн:



Я вродь как его сделал (то, что элементы криво-косо и не в соответствии, внимания не обращайте):

Суть вопроса: как мне его переделать? Я просто дупля не дам, как сделать его точно по макету, но что бы это потом ещё и адаптивно было. Искал реализации на codepen, но там в основном что-то в этом роде (т.е. ну сами видите):

Answer 1

[iBird Rose]

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

Comments

[Дмитрий]

Так а как мне тогда сделать структуру их расположения что бы была возможность садаптировать? Сейчас у меня просто две колонки (правая и левая). Адекватных идей нету.

[iBird Rose]

Дмитрий: в бутсрап есть такие штуки как pull и push. если юзаешь бутсрап, то с ними будет легко это сделать

[Дмитрий]

iBird Rose: да вот не юзаю. Да и при чем тут они (как я понял, они просто для указания расположения право/лево)? Суть в том, что расположение блоков там не очень упорядочены. Размер зависит от контента, как я понимаю. Потому первый правый может залезать ниже, чем начинается второй левый.

[iBird Rose]

Дмитрий: делаешь через float left и float right блоки. расстояние между блоками в любом случае для каждого блока придется указывать свое. можешь прямо в style="" писать им martgin-top. а потом просто при мобильной версии - убираешь все флоаты и маргины. итого у тебя все выстраивается в одну линию, а полоска остается по одну из сторон.

[iBird Rose]

Дмитрий: ну да. еще треугольник делаешь через after и на мобильниках когда все выстроится в одну линию - те треугольники которые не с той стороны - переводишь в противоположную сторону