如何底部证明高度不等的内联元素?

时间:2011-07-05 23:54:42

标签: css css3 transform css-float alignment

虽然许多其他问题都解决了元素的垂直对齐问题,但似乎没有任何问题可以解决我的特殊情况。

我试图实现以下布局,其中不相等高度的内联元素相对于容器是底部对齐的:

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

可以看到一个例子here。显示了三个元素,但假设各种尺寸更多,但都在一行中。

为了说明起见,该示例故意不完整。至少一个元素,比如中间元素B,必须具有不固定的内容高度和宽度,而是由(填充的)文本或一些其他内容确定。效果可见here

每个侧翼元素A和C的底部与B的文本基线对齐。这会在容器底部上方升高A和C,这是第一个问题。第二个问题是元件必须相对于彼此水平齐平。 (IIRC,相邻内联元素之间的水平间距未指定,因此依赖浏览器,但目前我无法在CSS规范中找到合适的段落。)

我可以通过浮动每个元素来解决第二个问题。效果可见here

现在,正如预期的那样,侧翼元素A和C top 对齐。我找到的 bottom 为浮动元素辩护的各种解决方案会产生我的布局要求所违反的假设(例如包含非确定宽度的元素)。

我确实想到了一个只是感觉不对的解决方案:通过变换双重翻转。容器和每个包含的元素通过比例变换垂直翻转。翻转容器会使浮动元素对齐到底部,并且翻转每个包含的元素会重新定向包含的元素。效果可见here

这有效,但它让我的一小部分死在里面。对此有更好的解决方案吗?

1 个答案:

答案 0 :(得分:3)

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

vertical-align: bottom添加到div,请参阅:http://jsfiddle.net/awkjj/4/

最简单的修补方法是删除HTML中的空格:http://jsfiddle.net/awkjj/7/

如果这令人反感,可以other ways消除差距。