インラインブロック 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 を適用することもできます。