如何底部对齐不等高度的内联元素？

Posted 2023-03-05

【中文标题】如何底部对齐不等高度的内联元素？

【英文标题】：How to bottom justify inline elements of unequal height?

【发布时间】：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。

这行得通，但它让我的一小部分死在里面。有没有更好的解决方案？

【参考方案1】：

从你的第二个例子开始..

将vertical-align: bottom 添加到div，参见：http://jsfiddle.net/awkjj/4/

最简单的间隙修复方法是删除 html 中的空格：http://jsfiddle.net/awkjj/7/

如果觉得不妥，有other ways可以消除差距。

【讨论】：

感谢您的快速回复。添加垂直对齐解决了底部对齐的问题，但不是水平间距。当应用浮动以移除水平间距时，垂直对齐不再适用。有没有其他方法可以去除水平间距？

顺便说一下，新的bikeshedding 属性（实施时）应该可以轻松消除差距。

正确，但我想我们会等很久 :(