使圖像彼此隱藏

[英]Making Images hidden next to each other


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


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是為了擺脫

之間的額外空白。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/09/08/a82b47d0e07734f4f59114110b6de335.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com