Как реализовать текстовый блок с линией между блоками текста разной длины?

Question

[NotLogo]

Подскажите пожалуйста как можно реализовать, подобный блок, отдельно учитывая, его поведение при адаптиве, при уменьшение viewport уже ширины блока

Answer 1

[Сергей delphinpro]

codepen.io/anon/pen/zomwex

Comments

[Никита Кит]

у флексов проблемы с поддержкой смартфонов

[Сергей delphinpro]

Никита Кит: Да что вы? На caniuse давно заглядывали? Единственное красное поле - Opera Mobile v12

[Никита Кит]

Сергей: ага. а ещё все андроид-браузеры ниже 4.4 и iOS 7, а с 4ми айфонами люди ещё ходят. Я очень часто их ещё вижу, несмотря на статистику. То же самое касается айпадов. Нет, использовать флексбоксы для адаптации ещё рано. Если только десктопная версия и нужно выстроить иконки или ещё какие-нибудь мелкие элементы без дочерних нод. Тут задача не настолько трудна чтоб прибегать к flex-контейнеру.

[Сергей delphinpro]

Никита Кит: Ну а я вижу, что флексы поддерживаются яблоком с версии 3 (что намного меньше упомянутой вами семерки) и вторым андроидом (почему вы говорите о 4 непонятно).

[Никита Кит]

Сергей: потому что у меня на iOS 7 safari они не поддерживаются. И андроидами 4.4 тоже, потому что они уже тоже не обновляются, а следовательно нативные браузеры не загружают в себя обновление браузеров с модулем интерпретации флексбоксов. Полное закрытие поддержки скоро, но пока статистику слушать рано.
А вообще я о том, что флексбоксы нужны в случае выстраивания в линию нескольких блоков, ради двух колонок даже изощряться не стоит. Флоутами быстрее.

[Сергей delphinpro]

Никита Кит: Не поддерживается враппинг, нужны префиксы (где-то только старый синтаксис). Но поддержка есть. Хотите сказать, что мой пример не работает в вашем ios7?

[Сергей delphinpro]

ps при условии расстановки префиксов, конечно.

[Никита Кит]

Сергей: да, ваш пример падает на iPhone 4

Answer 2

[Никита Кит]

codepen.io/anon/pen/pNxPRZ
Структура по модулю БЭМ. Препроцессор SCSS.
Если с флоутами баги, меня мой скрипт спасает.
dropcogs.pro/css-float-problems.html

Comments

[NotLogo]

Честно говоря, не понял как при этом между ними сделать линию? С условием того что param и value, как в вашем примере, могут иметь разную длину

[Никита Кит]

Да боже, возьми псевдоэлемент от plate. Сделай линию с помощью before, а блокам background с padding дай. Тут доработать делов то. Я за тебя код писать не буду))))

[Никита Кит]

Ну в принципе ладно уж. Сам уже для себя доработал. Пригодится.
codepen.io/ShadowOfCasper/pen/pNxPRZ

Answer 3

[NotLogo]

Нашел решение как сделать оглавление через css