html - 当子元素包含在其中时，内联 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>

整个左边的盒子是这样下去的:

我该如何解决？我为两个框设置了 padding top 和 margin top 零。主父元素也是如此。但它不起作用。

Answer 1

您应该将 vertical-align: top; 添加到这些行内 block 元素中。类似的东西应该工作:

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