如何将内联块元素的基线设置为其最后一个子元素的基线

Question

我有以下HTML：

<div class="horizontal">
  <div>A</div>
  <div>B</div>  

  <div class="vertical">
    <div>X</div>
    <div>Y</div>
  </div>
</div>

以及以下CSS：

.horizontal > div {
    display : inline-block;
}

.vertical > div {
    display : block;
}

目前我有

    X
A B Y

但是我想要

A B X
    Y  

我试过设置vertical-align：text-top，但是它没有以确切的方式对齐，缺少了几个像素，看起来很难看。

PS我为此使用jsfiddle： http : //jsfiddle.net/Lr8W4/10/

Answer 1

以下似乎有效：

.horizontal > div {
    display : inline-block;
    border: 1px dotted gray;
    vertical-align: text-top;
    font-size: 50px;
}

我夸大了字体大小以说明对齐方式。

请参阅以下网址的小提琴： http : //jsfiddle.net/audetwebdesign/FqEqh/