gpt4 book ai didi

html - 如何使用 css 在一行中获取所有图像(允许重叠)?

转载 作者:行者123 更新时间:2023-11-28 03:34:06 25 4
gpt4 key购买 nike

我有几张图片 (3),它们应该显示在一行中,并且它们的组合宽度大于页面宽度。但无论如何我都希望它们重叠,因此页面宽度并不重要。但出于某种原因,一行中只有 2 张图像,下一行显示第三张图像。我该如何解决这个问题。如果我将 .imageContainer 设为 position:abolute 并为每个 id 赋予 left:--px 值,它们将完美工作。但这将难以维护和调整。如果我减少每个图像的宽度,它们也会正确对齐,但我不想这样做:(。请帮助。


更新white-space:nowrap; 放在 allImagesContainer 中已经解决了这个问题,但仅限于 chrome。该问题在 FF 和 IE 中仍然存在。

代码如下:

<div class="allImagesContainer">
<div class="imageContainer" id="firstImage">
<img src="images/android1.png"/>
<div class="innerText"></div>
</div>

<div class="imageContainer" id="biggerImage" >
<img src="images/android2.png"/>
<div class="innerText"></div>
</div>

<div class="imageContainer" id="lastImage">
<img src="images/android3.png"/>
<div class="innerText"></div>
</div>
</div>

这是样式:

.allImagesContainer {
position: relative;
top: 50px;
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
display: table ;
}

.imageContainer{
position: relative;
display: inline-block;
}

#firstImage{
z-index: 1;
}

#biggerImage{
position: relative;
left: -50px;
z-index: 2;
}

#lastImage{
position: relative;
left: -40px;
z-index: 1;
}

最佳答案

white-space:nowrap;就是你要找的,放在allImagesContainer

查看 DEMO

关于html - 如何使用 css 在一行中获取所有图像(允许重叠)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15585876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com