インラインブロック DIV 要素をコンテナ要素の上部に揃えます。

Question

2 つの inline-block の div の高さが異なる場合、短い方がコンテナの上部に揃えられないのはなぜですか? (デモ):

.container {
    境界線: 1 ピクセルの黒の実線。
    幅: 320ピクセル;
    高さ: 120ピクセル;
}

。小さい {
    表示: インラインブロック;
    幅: 40%;
    高さ: 30%;
    境界線: 1 ピクセルの黒の実線。
    背景: アリスブルー;
}

。大きい {
    表示: インラインブロック;
    境界線: 1 ピクセルの黒の実線。
    幅: 40%;
    高さ: 50%;
    背景: ベージュ;
}

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

小さな div をコンテナの先頭に揃えるにはどうすればよいですか?

Answer 1

vertical-align 属性を両方の子 div に追加する必要があります。

.small が常に短い場合は、このプロパティを .small に適用するだけです。 ただし、どちらかが最も高い可能性がある場合は、このプロパティを .small と .big に適用する必要があります。

リーリー

垂直方向の配置は行内または表のセル ボックスに影響し、このプロパティにはさまざまな値があります。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-alignを参照してください。

Answer 2

デフォルトでは、vertical-align は baseline に設定されているためです。

代わりに vertical-align:top を使用してください:

リーリー

http://jsfiddle.net/Lighty_46/RHM5L/9/

または @f00644 が言ったように、子要素に float を適用することもできます。