所以我的网站有 3 张横跨整个宽度的图片,每张图片使用 33.33% 的宽度和固定的高度 (800px)。我想在每个单独的图像上创建淡入淡出叠加层,但是一旦我将一些 div 添加到图像的 html 代码 2,即使我没有添加任何空间,图像也会向下移动。有什么想法吗?
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;
最佳答案
只需将 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>`
关于html - 添加 div 后图像移出容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43821855/