2 つの inline-block の div の高さが異なる場合、短い方がコンテナの上部に揃えられないのはなぜですか? (デモ):
.container { 境界線: 1 ピクセルの黒の実線。 幅: 320ピクセル; 高さ: 120ピクセル; } 。小さい { 表示: インラインブロック; 幅: 40%; 高さ: 30%; 境界線: 1 ピクセルの黒の実線。 背景: アリスブルー; } 。大きい { 表示: インラインブロック; 境界線: 1 ピクセルの黒の実線。 幅: 40%; 高さ: 50%; 背景: ベージュ; } 小さな div をコンテナの先頭に揃えるにはどうすればよいですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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を適用することもできます。