massef
@massef

Как бы вы сверстали такой текст?

Интересует часть обведенная красным.

0d534885ff2f4fb3a6b4b8246b9e2c1f.png

Проблема в том что сайт адаптивный и при сужении строки у внутренних списков "рушаться", т.е. они не соответствуют друг другу, оно и понятно почему так, но другого решения я не нашел.
вот как это выглядит
ef827f450acf4e5b8d76ffe0e953674a.png

Накидал пример в песке jsfiddle.net/9n86wy26/embedded/result
Еще не нравится то, что отступы у внутренних списков пришлось делать через br

Есть мысли как это можно сверстать чтобы сохранить линию строки если описание получается в две и более строчки?
То есть тут нужен эффект vertical-align: top;

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

p.s. Дизайнер .....
p.p.s. Сори за каскад в песке
  • Вопрос задан
  • 2200 просмотров
Решения вопроса 1
sarhov
@sarhov
sarhov.com
может для табличных данных все таки стоит использовать таблицы ?

Он ведь для этого предназначен , уверен что если в этом случии сделать через таблиц, все встанет на место.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Ну раз таблица не годится(хм..)
тогда с использованием адаптивной сетки того же бустрапа, думаю можно добиться желаемого результата.

на вскидку так jsfiddle.net/9n86wy26/2 (уменьшайте экран, единственное что для .left, .right надо добавить пару медиа-запросов, чтобы они выравнивание и отступы делали только на экранах больше 768px)
Ответ написан
Комментировать
@Sali_cat
Однозначно в таблице. И выравнивание текста по правому и для 2й ячейки по левому, т.е так и оставить.
Ответ написан
Комментировать
dimka-dooz
@dimka-dooz
front-end разработчик)
jsfiddle.net/j6ps6ucr/1 Вот что наверное нужно. можешь поиграться с шириной и медиазапрос ставь по твоим нуждам
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы