【发布时间】：2011-09-29 05:30:54
【问题描述】：
虽然许多其他问题涉及元素的垂直对齐，但似乎没有一个涵盖我的特殊情况。
我正在尝试实现以下布局，其中高度不等的内联元素相对于容器底部对齐：
+-------------------+
| +-------+ |
| | | |
|+---+| B |+---+|
|| A || || C ||
|+---++-------++---+|
+-------------------+
可以看到一个例子here。显示了三个元素，但假设更多的是不同的大小，但都在一行中。
为了便于说明，该示例故意不完整。至少一个元素，比如中间元素 B，必须具有不固定的内容高度和宽度，而是由（填充的）文本或其他一些内容确定。效果可见here。
每个侧翼元素 A 和 C 的底部与 B 的文本的基线对齐。这将 A 和 C 提升到容器底部的上方，这是第一个问题。第二个问题是元素必须彼此水平齐平。 （IIRC，相邻内联元素之间的水平间距未指定，因此取决于浏览器，但目前我在 CSS 规范中找不到合适的段落。）
我可以通过浮动每个元素来解决第二个问题。效果可见here。
现在侧翼元素 A 和 C 是 top 对齐的，正如预期的那样。我为 bottom 找到了各种解决方案来证明浮动元素的合理性，这些假设违反了我的布局要求（例如包含不确定宽度的元素）。
不过，我确实想到了一种感觉不对的解决方案：通过变换进行双重翻转。容器和每个包含的元素通过缩放变换垂直翻转。翻转容器将浮动元素对齐到其底部，翻转每个包含的元素会重新定位包含的元素。效果可见here。
这行得通，但它让我的一小部分死在里面。有没有更好的解决方案？
【问题讨论】：
标签： css transform css-float alignment