私のコンテナ内の2番目のdivはなぜ隠されますか？

Question

私はスタックオーバーフローで無駄なものと同様の質問のヒントを見つけることを試みました。 floatとclearを根本的に理解しようとすると、私にはわかりにくい障害が発生しました。

CSS：

.div1 { 
    background-color: red; 
    width: 20%; 
    height: 100%; 
    display: inline-block; 
} 
.div2 { 
    background-color: blue; 
    width: 60%; 
    height: 600px; 
    display: inline-block; 
} 
.container { 
    height: 800px; 
} 

HTML：

<div class="container"> 
    <div class="div1"></div> 
    <div class="div2"></div> 
</div> 

なぜ第二のdivは、それ以上のすべてがスペースを持っていますか？私はfloat: leftをdiv1に含むことで、div2がdiv1をラップするので、問題が緩和されることを理解していますが、最初に問題が存在する理由を理解できません。私はどんな説明も感謝します。ありがとう。私はあなたが2つのブロックの垂直方向の配置を参照している推測している、「下にタック」とhttps://jsfiddle.net/y8gdbzd6/3/

Answer 1

：ここ

は、私が働いているかを確認するためにすばやくアクセスJSFiddleです。

display: inline-blockを使用する場合、vertical-alignプロパティはデフォルトでbaselineに設定されています。これにより、親要素のベースラインに基づいてさまざまな高さの要素が整列します。あなたはおそらくvertical-align: topの行動を期待している

：

"タック" と

.div1 { 
 
    background-color: red; 
 
    width: 20%; 
 
    height: 100%; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.div2 { 
 
    background-color: blue; 
 
    width: 60%; 
 
    height: 600px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.container { 
 
    height: 800px; 
 
}

<div class="container"> 
 
    <div class="div1"></div> 
 
    <div class="div2"></div> 
 
</div>