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

发布于 2024-11-18 18:20:07 字数 1092 浏览 1 评论 0原文

虽然许多其他问题都涉及元素的垂直对齐，但似乎没有一个问题涵盖了我的特殊情况。

我正在尝试实现以下布局，其中不等高度的内联元素相对于容器底部对齐：

+-------------------+
|     +-------+     |
|     |       |     |
|+---+|   B   |+---+|
|| A ||       || C ||
|+---++-------++---+|
+-------------------+

可以看到一个示例这里。显示了三个元素，但假设更多的不同尺寸，尽管全部在一行中。

为了便于说明，该示例故意不完整。至少一个元素（例如中间元素 B）必须具有不固定的内容高度和宽度，而是由（填充的）文本或某些其他内容确定。可以在此处查看效果。

每个侧翼元素 A 和 C 的底部与 B 文本的基线对齐。这会将 A 和 C 提升到容器底部上方，这是第一个问题。第二个问题是元素必须彼此水平齐平。（IIRC，相邻内联元素之间的水平间距未指定，因此取决于浏览器，尽管目前我无法在 CSS 规范中找到适当的段落。）

我可以通过浮动每个元素来解决第二个问题。可以在此处查看效果。

现在，侧翼元素 A 和 C 正如预期的那样顶部对齐。我发现的用于证明浮动元素合理性的各种解决方案做出了违反我的布局要求的假设（例如包含不确定宽度的元素）。

然而，我确实想到了一种感觉错误的解决方案：通过变换进行双重翻转。容器和每个包含的元素通过缩放变换垂直翻转。翻转容器使浮动元素对齐到其底部，翻转每个包含的元素会重新定向包含的元素。可以在此处查看效果。

这确实有效，但它让我内心的一部分死去。对此有更好的解决方案吗？

原文

While many other questions address the vertical alignment of elements, none seem to cover my particular situation.

I am trying to effect the following layout, whereby inline elements of unequal height are bottom justified with respect to a container:

+-------------------+
|     +-------+     |
|     |       |     |
|+---+|   B   |+---+|
|| A ||       || C ||
|+---++-------++---+|
+-------------------+

An example can be seen here. Three elements are shown, but assume more of various sizes, though all in a single line.

The example is purposefully incomplete for the sake of illustration. At least one element, say the middle element B, must have a content height and width that is not fixed but is instead determined 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 baseline of the text of 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 flush with respect to each other. (IIRC, the horizontal spacing between adjacent inline elements is unspecified and therefore browser dependent, though at the moment I can't find the appropriate passage in the CSS spec.)

I can fix the second problem by floating each element. The effect can be seen here.

Now the flanking elements A and C are top justified, as expected. The various solutions that I have found for bottom justifying a floated element make assumptions that are violated by my layout requirements (such as a contained element of non-determinate width).

I did think of one solution that just feels wrong, however: double flipping via transforms. The container and each contained element are vertically flipped by a scale transform. Flipping the container justifies the floated elements to its bottom, and flipping each contained element re-orients the contained element. The effect can be seen here.

This works, but it makes a little part of me die inside. Is there a better solution for this?

分享到QQ

分享到微博