css - 如何将 inline-block 元素的基线设置为其最后一个子元素的基线

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/

score 1 · Accepted Answer

以下似乎有效：

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

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

1 回答 1