.imageList{
overflow-x: auto;
overflow-y: hidden;
height:180px;
white-space: nowrap;
img{
width:auto;
height:100%;
margin-right:10px;
}
}
<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标签不能左浮动,外层容器必须加不换行

white-space: nowrap;

css实现图片横向排列滚动的更多相关文章

  1. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  3. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  4. css如何将图片横向平铺?

    在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...

  5. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  6. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  7. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

  8. flash滑杆控制图片横向滚动

    flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html

  9. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

随机推荐

  1. Gnome3 安装系统监视器

    . . . . . 之前使用Gnome2的时候可以向面板上添加一个系统监视器,相信很多人都用过这个实用的小工具,可以很方便的了解系统的运行概况.但是自从使用了Gnome3之后这个小工具不见了,Gnom ...

  2. 怎样用Google APIs和Google的应用系统进行集成(2)----Google APIs的全部的RESTFul服务一览

    上篇文章,我提到了,Google APIs暴露了86种不同种类和版本号的API.我们能够通过在浏览器里面输入https://www.googleapis.com/discovery/v1/apis这个 ...

  3. 轻松学习JavaScript二十七:DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  4. wamp升级php5.3.10到php5.6.13版本

    1.  停止WAMP服务器. 2.  去网站windows.php.net 下载php-5.6.13-nts-Win32-VC9-x86.zip. 不要下载THE INSTALLER. 3.  在wa ...

  5. Linux 下编译出现 undefined reference to `pthread_create'

    这是由于没有链接线程库的原因,只要在编译的时候加入: -lpthread 参数即可. arm-linux-gcc serial.c -o serial -lpthread 查看 ubuntu 版本的命 ...

  6. [uboot]uboot中am437对应的GPIO配置

    修改文件:board/ti/am43xx/mux.c 修改内容:void enable_board_pin_mux(configure_module_pin_mux(d3d4_pin_mux)

  7. android 技术点记录

    Android Service完全解析,关于服务你所需知道的一切(上) http://blog.csdn.net/guolin_blog/article/details/11952435 androi ...

  8. Redis源码研究—基础知识

    1. Redis 是什么 Redis是一个开源的使用ANSI C语言编写的基于内存的key/value存储系统,与memcache类似,但它支持的value类型更多,包括:字符串(string).链表 ...

  9. 微信小程序——页面之间传递值

    小程序页面传值的方式: 1.正向传值:上一页面 -->  下一页面 url传值 本地储存 全局的app对象 2.反向传值:下一页面 -->  上一页面 本地储存 全局的app对象 先说一下 ...

  10. mysql导入sql脚本

    例如:我的用户名是root 密码是123 sql脚本存在C盘 名字为test.sql 数据库为test 有两种方法可以执行脚本 1:打开CMD输入以下命令(不需要转换目录)>mysql -u r ...