Возникла задача, которая медленно, но уверенно выносит мне мозг.
Сразу дам ссылку на
пример в песочнице
Есть контейнер, в котором расположены 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. Как можно решить задачу с максимальной поддержкой семантичности и минимальными потерями дальнейшей расширяемости и кастомизации?
Простой
Средний
