添加div后，图像从容器中移出

Question

所以我的网站有3个图像，横跨整个宽度，每个图像使用33.33％宽度和固定高度（800px）。我想在每个单独的图像上创建淡入淡出，但是只要我在html代码中添加一些div，图像的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

即可

＆＃13;

＆＃13;

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

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

＆＃13;

<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>`

＆＃13;

＆＃13;

＆＃13;