使图像彼此隐藏

I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.

我正在尝试制作一个图像滚动条,我仍然坚持使用我的CSS方面。我现在拥有的CSS正在让它们彼此相互影响而不是彼此相邻,我无法弄清楚如何使它以这种方式工作。

The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.

图像存储在一个div中,它们位于另一个名为imageScroller的div下,imageScroller div位于Content div下。

Here is the CSS of the following divs

这是以下div的CSS

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

1 个解决方案

#1

I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.

我认为你想要的是通过添加white-space:nowrap到#imageSlider并改变.image来实现而不是float:left,它是display:inline-block。

Here's a fiddle. Adjust as needed.

这是一个小提琴。根据需要调整。

The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.

#imageSlider中的font-size:0是为了摆脱

之间的额外空白。

#1