Html 当子元素包含在内联块元素中时，内联块元素停止

我正在开发一个网站。在我的网站上，我展示了两个元素并排。第二个元素将具有固定的宽度，但第一个元素将占用剩余的空间。所以我写了一个简单的HTML和CSS代码如下

html

它显示如下：

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

        </div>
</div>

它正在按预期工作，因为您可以看到红色和黄色框。但问题是当我向HTML添加一个子元素时，如下所示：

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

        </div>
</div>

整个左边的盒子像这样往下掉：

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

        </div>
</div>

我怎样才能修好它？我为两个框设置了padding top和margin top zero。也是主父元素。但它不起作用。

您应该添加垂直对齐：顶部；添加到这些内联块元素。类似的方法应该会奏效：

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

---

谢谢你，伙计。成功了。我稍后会投票表决你的答案。太赫兹很多。