1. ホーム
  2. css

[解決済み】インラインブロックのDIVをコンテナ要素の上部に揃える

2022-04-05 14:11:46

質問

2つの場合 inline-block div の高さが違うのに、なぜ短い方が容器の上部に揃わないのでしょうか? ( DEMO ):

.container { 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small {
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;    
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;    
}
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>

小物の位置合わせはどうすればいいのか div を、その容器の上部に置くのですか?

どのように解決するのですか?

なぜなら vertical-align が設定されます。 ベースライン をデフォルトとします。

使用方法 vertical-align:top ではなく

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

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

または @f00644 を適用できるって float を子要素にも適用する。