html - 添加 div 后图像移出容器

Question

所以我的网站有 3 张横跨整个宽度的图片，每张图片使用 33.33% 的宽度和固定的高度 (800px)。我想在每个单独的图像上创建淡入淡出叠加层，但是一旦我将一些 div 添加到图像的 html 代码 2，即使我没有添加任何空间，图像也会向下移动。有什么想法吗？

How it should behave

What happens upon adding new divs

这是没有任何新 div 的代码，关于如何解决这个问题有什么想法吗？

<div id="content">
        <img src="images/phantom.png"alt="An image showing a male actor performing during the musical Phantom of the Opera" class="musicalimage">
        <img src="images/lion_king.png" alt="An image showing a male actor performing during the musical Lion King" class="musicalimage">
        <img src="images/wicked.png" alt="An image showing a female actor performing during the musical Wicked" class="musicalimage">   
</div>`

---

#content {
    height: 800px;
    width: 100%;
    font-size: 0px;

}

.musicalimage {
    width: 33.33%;
    height: 800px;
    display: inline;

Answer 1

只需将 display: flex 添加到 #content

#content {
  height: 800px;
  width: 100%;
  font-size: 0px;
  display: flex;
}

.musicalimage {
  width: 33.33%;
  height: 800px;
  display: inline;
}

<div id="content">
  <img src="images/phantom.png" alt="An image showing a male actor performing during the musical Phantom of the Opera" class="musicalimage">
  <img src="images/lion_king.png" alt="An image showing a male actor performing during the musical Lion King" class="musicalimage">
  <img src="images/wicked.png" alt="An image showing a female actor performing during the musical Wicked" class="musicalimage">
</div>`