子要素が含まれていると、インラインブロック要素がダウンしました

Question

私はウェブサイトを開発中です。私のウェブサイトでは、2つの要素を並べて表示しています。 2番目の要素は固定幅を持ちますが、最初の要素は残りの領域を占めます。だから私はこのような単純なHTMLとCSSコードを書いた。

HTML

<div class="gallery-container"> 
    <div class="gallery-left"> 

    </div> 
    <div class="gallery-right"> 

    </div> 
</div> 

CSS

.gallery-left{ 
    padding-top: 0px; 
    background: red; 
    display: inline-block; 
    height: 100%; 
    margin-top: 0px; 
    width: calc(100% - 100px); 
} 

.gallery-right{ 
    padding-top: 0px; 
    display: inline-block; 
    background: yellow; 
    width: 96px; 
    height: 100%; 
} 

.gallery-container{ 
    width: 100%; 
    height: 300px; 
} 

それはこのように表示されます。あなたは、赤と黄色のボックスを見ることができるよう期待通りに働いている

。しかし、私は、このようにHTMLに子要素を追加するときに問題がある：

どのように私はそれを修正することができます：

<div class="gallery-container"> 
     <div class="gallery-left"> 
       <h5>This is child element</h5>   
     </div> 
     <div class="gallery-right"> 

     </div> 
</div> 

全体の左のボックスは、次のように下って行きましたか？私は両方のボックスにパディングトップとマージントップゼロを設定します。主要な親要素も同様です。しかし、それは動作していません。

Answer 1

これらのインラインブロック要素にvertical-align: top;を追加する必要があります。そのようなものはうまくいくはずです：

.gallery-left{ 
    padding-top: 0px; 
    background: red; 
    display: inline-block; 
    height: 100%; 
    margin-top: 0px; 
    vertical-align: top; 
    width: calc(100% - 100px); 
} 

.gallery-right{ 
    padding-top: 0px; 
    display: inline-block; 
    background: yellow; 
    vertical-align: top; 
    width: 96px; 
    height: 100%; 
}