虽然许多其他问题都解决了元素的垂直对齐问题，但似乎没有任何问题可以解决我的特殊情况。
我试图实现以下布局，其中不相等高度的内联元素相对于容器是底部对齐的：
+-------------------+
| +-------+ |
| | | |
|+---+| B |+---+|
|| A || || C ||
|+---++-------++---+|
+-------------------+
可以看到一个例子here。显示了三个元素，但假设各种尺寸更多，但都在一行中。
为了说明起见，该示例故意不完整。至少一个元素，比如中间元素B，必须具有不固定的内容高度和宽度，而是由（填充的）文本或一些其他内容确定。效果可见here。
每个侧翼元素A和C的底部与B的文本基线对齐。这会在容器底部上方升高A和C，这是第一个问题。第二个问题是元件必须相对于彼此水平齐平。 （IIRC，相邻内联元素之间的水平间距未指定，因此依赖浏览器，但目前我无法在CSS规范中找到合适的段落。）
我可以通过浮动每个元素来解决第二个问题。效果可见here。
现在，正如预期的那样，侧翼元素A和C top 对齐。我找到的 bottom 为浮动元素辩护的各种解决方案会产生我的布局要求所违反的假设（例如包含非确定宽度的元素）。
我确实想到了一个只是感觉不对的解决方案：通过变换双重翻转。容器和每个包含的元素通过比例变换垂直翻转。翻转容器会使浮动元素对齐到底部，并且翻转每个包含的元素会重新定向包含的元素。效果可见here。
这有效，但它让我的一小部分死在里面。对此有更好的解决方案吗？
答案 0 :(得分：3)
从你的第二个例子开始..
将vertical-align: bottom添加到div，请参阅：http://jsfiddle.net/awkjj/4/
最简单的修补方法是删除HTML中的空格：http://jsfiddle.net/awkjj/7/
如果这令人反感，可以other ways消除差距。