HTML/JS转换工具
Unicode编码转换
当前位置:首页 > 网站技术 > 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>

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

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

?
1
white-space: nowrap;

总结

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

织梦二维码生成器

与相关的文章
有时间的话来看看IT界的突发事件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片