Question

我有两个问题

1）如何删除y滚动条。

2）如何让图像向左滚动而不是向下滚动？

有什么建议吗？非常感谢任何帮助。

这是我的example：

HTML

<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>"  />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>"  />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>"  />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>"  />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>"  />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>"  />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>"  />
</div>

CSS

.ProjectGallery{height:300px;overflow:scroll;float:left;} 
.ProjectGallery img{float:left;width:100%;height:100px;}

Answer 1

        <div class="gallery-container">
            <div class="gallery">
                <div class="thumbnails">
                    <img src="images.png"/>
                    <img src="images.png"/>
                    <img src="images.png"/>
                    <img src="images.png"/>
                    <img src="images.png"/>
                    <img src="images.png"/>
                </div>
            </div>
        </div>

        .gallery
        {
            border: 1px solid black;
            height: 120px;
            width: 200px;
            overflow: hidden;
            overflow-x: scroll;
        }

        .thumbnails
        {
            width: 1000px;
        }

        .gallery-container img
        {
            width: 200px;
            height: auto;
        }

        .thumbnails img
        {
            width: auto;
            height: 100px;
            display: block;
            float: left;
            border: 1px solid #ddd;
            margin: 1px;
        }

试试这个

Answer 2

试试这个

<强> HTML

<div class="ProjectGallery">
<img src="images/Thumb/10.jpg" data-title="<?=$title10?>"  />
<img src="images/Thumb/11.jpg" data-title="<?=$title11?>"  />
<img src="images/Thumb/12.jpg" data-title="<?=$title12?>"  />
<img src="images/Thumb/14.jpg" data-title="<?=$title14?>"  />
<img src="images/Thumb/15.jpg" data-title="<?=$title15?>"  />
<img src="images/Thumb/17.jpg" data-title="<?=$title17?>"  />
<img src="images/Thumb/18.jpg" data-title="<?=$title18?>"  />
</div>

<强> CSS

.ProjectGallery{height:300px;overflow:scroll;white-space:nowrap} 
.ProjectGallery img{width:100%;height:100px;display:inline;}

Y滚动条和滚动图像到左侧

2 个答案: