Как сверстать линию прогресса для IE9 без flexbox?

Question

[Можно просто Евгений]

Нужно сверстать это и под IE9 , к сожалению там flexbox не работает. Как бы вы сделали ? учитывая что там количество может быть от 2-х до 6-ти точек , первая и последняя что была по краям , а остальные равномерно выравнивались ...

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

Answer 1

[Сергей delphinpro]

Фиксированная таблица распределяет ячейки равномерно, как space-between во флексах.
Отсюда и пляшите

.progress
  .cell

.progress { display: table; table-layout: fixed; width: 100%; }
.cell { display: table-cell; }

Возможно придется добавить обертку для table-row
Ячейки релатив, или внутри доп. контейнер с релатив.
Точки добавить внутрь, раскидать обсолютом по границам ячеек.

Comments

[Сергей delphinpro]

Второй вариант - инлайновый контекст с выравниванием text-align: justify

[Можно просто Евгений]

Второй вариант :
Пробовал , но почему-то не выравнивал , попробую еще раз что то пошаманить.

Первый вариант:
Так же пробовал , прикол в том что там text-align: center , если у меня будут 2-е .cell так сказать , то у них будет по 50 % ширина , и текст будет по центру , если не задать text-align: center то как то криво будет ...

Спасибо за ответ ! )

[Сергей delphinpro]

Можно просто Евгений, для второго варианта нужно добавлять невидимый элемент шириной 100% (что он перенесся на вторую строку, и первая тогда выровняется — потому что последняя строка не выравнивается)
Сразу видно, верстаете недавно (в годах) и не делали таким методом менюшки в до-флексовую эпоху =)))

[Сергей delphinpro]

Можно просто Евгений, первый вариант с таблицей имелось ввиду, что точки будут располагаться на границах ячеек

[Можно просто Евгений]

Сергей delphinpro, стаж 7 лет )) но увы с text-align: justify не сталкивался )) флоты , марджины как то так пытался всё решать )) и тд ....

[Сергей delphinpro]

Можно просто Евгений, как-то так jsfiddle.net/kuxpq95t

[Сергей delphinpro]

Можно просто Евгений, с таблицами лень пример делать, там больше кода. надеюсь понятно объяснил

[Можно просто Евгений]

Сергей delphinpro, да , найс , спасибо ) достаточно , табличками выше показали , просто по структуре не совпадает ...

Answer 2

[Дмитрий]

Пример

Comments

[Можно просто Евгений]

Да , спасибо ) всё таки мне надо менять разметку в HTML ... просто у меня оптимально сделано для современных браузерах ...

Answer 3

[Programmir]

Забить на IE9)

Comments

[Можно просто Евгений]

Не как )