Хотя многие другие вопросы касаются вертикального выравнивания элементов, ни один из них, похоже, не охватывает мою конкретную ситуацию.
Я пытаюсь создать следующую компоновку, в которой встроенные элементы неравной высоты выравниваются снизу относительно контейнера:
+-------------------+
| +-------+ |
| | | |
|+---+| B |+---+|
|| A || || C ||
|+---++-------++---+|
+-------------------+
Пример можно увидеть здесь . Показаны три элемента, но они имеют различные размеры, но все в одной строке.
Приведенный пример не является целенаправленным для иллюстрации. По крайней мере, один элемент, скажем средний элемент B, должен иметь высоту и ширину содержимого, которые не являются фиксированными, а вместо этого определяются (дополненным) текстом или некоторым другим содержимым. Эффект можно увидеть здесь .
Дно каждого из фланкирующих элементов A и C совпадает с базовой линией текста B. Это поднимает A и C над дном контейнера, что является первой проблемой. Вторая проблема заключается в том, что элементы должны располагаться горизонтально относительно друг друга. (IIRC, горизонтальный интервал между соседними встроенными элементами не определен и поэтому зависит от браузера, хотя в настоящий момент я не могу найти соответствующий отрывок в спецификации CSS.)
Я могу решить вторую проблему, поместив каждый элемент. Эффект можно увидеть здесь .
Теперь боковые элементы A и C top выровнены, как и ожидалось. Различные решения, которые я нашел для bottom , оправдывающие плавающий элемент, делают предположения, которые нарушаются моими требованиями макета (такими как содержащийся элемент с неопределенной шириной).
Однако я подумал об одном решении, которое кажется неправильным: двойное переключение с помощью преобразований. Контейнер и каждый содержащийся в нем элемент вертикально переворачиваются с помощью масштабного преобразования. Переворачивание контейнера оправдывает всплывающие элементы на его дне, а переворачивание каждого содержащегося элемента переориентирует содержащийся элемент. Эффект можно увидеть здесь .
Это работает, но это заставляет маленькую часть меня умереть внутри. Есть ли лучшее решение для этого?