css - インラインブロック要素のベースラインを最後の子のベースラインと等しく設定する方法

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;
}

配置を示すために、フォントサイズを誇張しています。

次のフィドルを参照してください: http://jsfiddle.net/audetwebdesign/FqEqh/

1 に答える 1