当子元素包含在其中时，内联块元素已关闭

Question

我正在开发一个网站。在我的网站中，我展示了两个元素并排。第二个元素将具有固定宽度，但第一个元素将占用剩余的空间。所以我写了一个简单的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%; 
}