インラインブロック DIV 要素をコンテナ要素の上部に揃えます。
P粉682987577
P粉682987577 2023-08-21 20:17:02
0
2
376
<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>
P粉682987577
P粉682987577

全員に返信(2)
P粉786432579

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

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

リーリー

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

いいねを押す +0
P粉744831602

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

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

リーリー

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

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート