[Помогите] Подскажите как правильнее сделать вот такой блок

AlexGood · 28 окт 2019

Есть вот такой макет http://prntscr.com/ppaz4a - это будет типа резиновой таблицы. Не могу догнать что делать - весь контент в строке разделен точками - эти , значения могут меняться и текст и цифры - естественно все будет скокать.
Чтобы сделать данные точки на сколько я понимаю надо обернуть все содержимое в один блок и сделать ему border-bottom: 1px dotted #000; - стилями размер точек и отступы между ними вроде как можно поменять...
Значениям всем можно задать padding и background и позиционированием опустить на точки - но как сделать чтобы не было свестоплясок и сами блоки были резиновыми и в тоже время все было на одном уровне (вертикальном) когда строк будет несколько?

Dotrox · 29 окт 2019

В своё время у меня возникла похожая задача.
Я обернул строку в span и добавил ему псевдоэлемент ::before с абсолютным позиционированием и нижним бордером. z-index поставил на -1, таким образом бордер оказался под текстом. А блокам с текстам поставил белый фон, таким образом бордер под ними не был виден.

AlexGood сказал(а): ↑

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

Флексбокс.
Если на обёртку поставить такие стили:
Код:
display: flex;
justify-content: space-between;
align-items: center;
Блоки с текстом растолкаются по краям и выровняются вертикально.

Войти или зарегистрироваться

[Помогите] Подскажите как правильнее сделать вот такой блок

AlexGood

Dotrox Команда форума