インラインブロック DIV 要素をコンテナ要素の上部に揃えます。
P粉682987577
2023-08-21 20:17:02
<p>2 つの <code>inline-block</code> の <code>div</code> の高さが異なる場合、短い方がコンテナの上部に揃えられないのはなぜですか? (<strong>デモ</strong>): </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
境界線: 1 ピクセルの黒の実線。
幅: 320ピクセル;
高さ: 120ピクセル;
}
。小さい {
表示: インラインブロック;
幅: 40%;
高さ: 30%;
境界線: 1 ピクセルの黒の実線。
背景: アリスブルー;
}
。大きい {
表示: インラインブロック;
境界線: 1 ピクセルの黒の実線。
幅: 40%;
高さ: 50%;
背景: ベージュ;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="small"></div>
<div class="big"></div>
</div></pre>
<p><br /></p>
<p>小さな <code>div</code> をコンテナの先頭に揃えるにはどうすればよいですか? </p>
vertical-align
属性を両方の子 div に追加する必要があります。.small
が常に短い場合は、このプロパティを.small
に適用するだけです。 ただし、どちらかが最も高い可能性がある場合は、このプロパティを.small
と.big
に適用する必要があります。垂直方向の配置は行内または表のセル ボックスに影響し、このプロパティにはさまざまな値があります。詳細については、https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-alignを参照してください。
デフォルトでは、
vertical-align
は baseline に設定されているためです。代わりに
リーリーvertical-align:top
を使用してください:http://jsfiddle.net/Lighty_46/RHM5L/9/
または @f00644 が言ったように、子要素に
float
を適用することもできます。