html - 使图像彼此隐藏

Question

我正在尝试制作一个图像滚动器，但我受困于我的 CSS 方面。我目前拥有的 CSS 使它们相互重叠，而不是彼此相邻，我不知道如何让它以这种方式工作。

图像存储在自己的一个 div 中，该 div 在另一个名为 imageScroller 的 div 下，而 imageScroller div 在 Content div 下。

这是以下div的CSS

#content
{
    text-align: center;
    padding: 20px;
}
#imageScroller{
    margin: 0 auto;
    width: 850px;
    height: 250px;
    overflow: hidden;
}
.image{
    float: left;
}

Answer 1

我想你想要的是通过添加 white-space: nowrap 来实现的至 #imageSlider和改变.image这样就可以代替 float: left , 它是 display: inline-block .

这是一个 fiddle .根据需要进行调整。

font-size: 0在#imageSlider是为了摆脱 <div> 之间多余的空白区域