當子元素包含在其中時，內聯塊元素已關閉

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