CSS: Вертикальное выравнивание текстов в двух последовательных DIV'ах по единому baseline

Возникла задача, которая медленно, но уверенно выносит мне мозг.

Сразу дам ссылку на пример в песочнице

Есть контейнер, в котором расположены 3 DIV'а (float: left/left/right), в которых находятся по несколько inline'овых элементов (span, label, select, a). Пока кегль шрифта у всех элементов одинаковый, они прекрасно позиционируются вертикально относительно друг друга. Но если где-нибудь увеличить кегль, то они начинают разваливаться вертикально, так как теряется общая baseline.


Всякие ухищрения с line-height, vertical align не дают ощутимого результата. Я вижу несколько решений, но ни одно из них не блещет красотой:
— абсолютное позиционирование по вертикали, — получается очень хрупкая конструкция, которая разваливается при изменнии любых шрифтовых параметров (кегль, гарнитура, ...), а так-же подвержена настройкам системы и браузера;
— подбор численных значений в vertical-align, — аналогичные проблеммы;
— отказ от 3-х DIV'ов внутри контейнера, — четко найдется baseline, но будут проблеммы с горизонтальным позиционированием блоков и расширяемостью (интерфейс предусматривает возможность скиннизации).

На повестке 2 вопроса:
1. Можно ли в данном случае, не меняя структуры, «подсказать» браузеру общий baseline для этих 3-х DIV'ов?
2. Как можно решить задачу с максимальной поддержкой семантичности и минимальными потерями дальнейшей расширяемости и кастомизации?
  • Вопрос задан
  • 7403 просмотра
Решения вопроса 1
image
Чтобы создать «общий baseline», поставьте одинаковый line-height дивам. На картинке 30px, можно и в em задать. Уберите инлайн-блочность, где не надо, уберите или подправьте умолчательные отступы у элементов форм, выровняйте их по вертикали.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Проблема здесь заключается в float:XXX — перед присваиванием обтекаемости элемент становится блоком. А блочные елементы не получится выровнять по общей baselinе. К сожалению, обыкновенным 'line-height' не обойтись, так как у каждого блока будет все же своя baseline разве что только на глаз подбирать разные line-height + «elment1 line-height 1em != element2 line-height 1em по причине разныx font-size». Или я ошибаюсь?

Я бы предложил display:table-cell;

.replies-summary>div{float:none; display:table-cell; white-space:nowrap;}
.replies-summary>div:nth-child(3){ width:100%; text-align:right; font-size:3em;}
Ответ написан
Буду благодарен, если исправите пример без указания line-height каждому (+ на глаз) блоку
link
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
02 нояб. 2024, в 21:08
2000000 руб./за проект
02 нояб. 2024, в 20:34
40000 руб./за проект
02 нояб. 2024, в 20:05
800 руб./в час