javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > 网站技术 > DivCss教程 > 

css实现图片横向排列滚动效果

来源:IT技术网编辑:雨天发布于:2017-12-09人围观

具体代码如下所示:

?
1
2
3
4
5
6
7
8
9
10
11
.imageList{
overflow-x: auto;
overflow-y: hidden;
height:180px;
white-space: nowrap;
img{
width:auto;
height:100%;
margin-right:10px;
}
}
?
1
2
3
4
5
6
7
<div class="imageList">
<img src="1.jpg"/>
<img src="2.jpg"/>
<img src="3.jpg"/>
<img src="4.jpg"/>
<img src="1.jpg"/>
</div>

这里注意,img标签不能左浮动,外层容器必须加不换行

?
1
white-space: nowrap;

总结

以上所述是小编给大家介绍的css实现图片横向排列滚动效果,希望对大家有所帮助

与相关的文章
有时间的话来看看IT界的突发事件