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