2

我有一些图像（3）应该显示在一行中，并且它们的组合宽度大于页面宽度。但我无论如何都希望它们重叠，因此页面宽度无关紧要。但是由于某种原因，一行中只有 2 张图像，而下一行中只有 2 张图像。我该如何解决这个问题。.imageContainer如果我为每个 id 设置position:abolute并赋予值，它们就可以完美地工作。left:--px但这将难以维持和调整。如果我减小每个图像的宽度，它们也会正确对齐，但我不想这样做:(。请帮助。

white-space:nowrap;allImagesContainer 中的UPDATE解决了这个问题，但仅限于 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;
}
4

2 回答 2

0

如果你不想换行，你可以在 allImagesContainer 上使用这个 css

.allImagesContainer
{
  white-space:nowrap;
}

您可以删除所有元素的 position: absolute 和 relative 但保留 display:inline-block

于 2013-03-23T11:45:57.677 回答
0

white-space:nowrap;是您正在寻找的，放置在allImagesContainer

查看演示

于 2013-03-23T10:59:21.623 回答