Html 添加div后图像移出容器

因此，我的网站有3幅图片，横跨整个宽度，每幅使用33.33%的宽度和固定高度（800px）。我想在每个单独的图像上创建一个淡入覆盖，但是一旦我在图像的html代码2中添加了一些div，即使我没有添加任何空间，也会被下移。有什么想法吗

这是没有任何新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>`

---

只需将

display:flex

添加到

#content

#内容{
高度：800px；
宽度：100%；
字体大小：0px；
显示器：flex；
}
.音乐图像{
宽度：33.33%；
高度：800px；
显示：内联；
}

`

嗯，就是这样。。非常感谢你：顺便问一下，flex到底做了什么？我认为内联块也会做同样的事情..只要谷歌flexbox，你就会很容易找到很多资源

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

}

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