虽然其他许多问题都涉及元素的垂直对齐，但似乎没有一个问题涵盖我的特殊情况。
我正在尝试影响以下布局，即不相等高度的内联元素相对于容器进行底部对齐:
+-------------------+
| +-------+ |
| | | |
|+---+| B |+---+|
|| A || || C ||
|+---++-------++---+|
+-------------------+
可以在这里看到一个例子。显示了三个元素，但假设它们的大小不同，尽管它们都在一行中。
为了说明，这个例子故意不完整。至少有一个元素，比如中间的元素B，必须具有不固定的内容高度和宽度，而是由(填充的)文本或其他内容决定的。效果可以在这里看到。
每个侧边元素A和C的底部与b文本的基线对齐，这使A和C高于容器底部，这是第一个问题。第二个问题是元素之间必须在水平方向上相互齐平。(IIRC，相邻行内元素之间的水平间距未指定，因此依赖于浏览器，尽管目前我无法在CSS规范中找到适当的段落。)
可以通过浮动每个元素来解决第二个问题。效果可以在这里看到。
现在，侧翼元素A和C top对齐，如预期的那样。我找到的各种解决方案bottom证明浮动元素的假设违反了我的布局要求(例如包含宽度不确定的元素)。我确实想到了一个解决方案，但感觉不对:通过变换进行双重翻转。容器和每个包含的元素通过缩放变换垂直翻转。翻转容器将被浮动的元素调整到底部，并且翻转每个包含的元素将重新定位所包含的元素。效果可以在这里看到。
这是有效的，但它使我内心的一小部分死亡。有没有更好的解决办法?
从第二个例子开始…
将vertical-align: bottom加入div，参见:http://jsfiddle.net/awkjj/4/
最简单的解决方法是删除HTML中的空白:http://jsfiddle.net/awkjj/7/
如果不喜欢，还有其他方法可以删除空格