当包含子元素时，inline-block元素关闭

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%;
}