While many other questions relate to the vertical alignment of elements, none of them cover my specific situation.
I am trying to execute the following layout in which inline elements with unequal height are aligned to the bottom relative to the container:
+-------------------+ | +-------+ | | | | | |+---+| B |+---+| || A || || C || |+---++-------++---+| +-------------------+
Below is an example here . Three elements are shown, but suggest more different sizes, although all on the same line.
The example is purposefully incomplete for illustration. At least one element, such as the middle element B, must have a height and a width of content that are not fixed, but instead are defined by (padded) text or some other content. The effect can be seen here .
The bottom of each of the flanking elements A and C aligns with the base text of text B. This raises A and C above the bottom of the container, which is the first problem. The second problem is that the elements must be horizontally red relative to each other. (IIRC, the horizontal distance between adjacent inline elements is undefined and therefore depends on the browser, although at the moment I cannot find the corresponding passage in the CSS specification.)
I can fix the second problem by floating each element. The effect can be seen here .
Now flanking elements A and C are justified from above, as expected. Various solutions that I found for lower alignment of a floating element make assumptions that are violated by my layout requirements (for example, containing an element of an undefined width).
I really thought of one solution that just feels wrong: double switching through transformations. The container and each containing element are vertically inverted using scale transformation. Turning the container over justifies the moved items to the bottom, and transferring each contained item redirects the contained item. The effect can be seen here .
It works, but because of me, part of me dies inside. Is there a better solution for this?