.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. Spring项目中执行Java脚本

    问题:在已搭建好Spring环境的JavaWeb项目中,怎么运行一段Java代码,执行一些类似脚本的功能. 情况一:测试局部功能,不需要依赖Spring框架的. 方法:IDEA中新建一个类,编写主函数 ...

  2. InstallShield安装jdk并设置环境变量

    1. 检查是否安装jdk function OnBegin() begin Disable (BACKBUTTON); if(!MAINTENANCE)then SdLicense2 ("L ...

  3. Mongo分区后分片下count记录不准确

    问题描述 问题如图,后来上网查了一下,发现了这是正常现象: 官方文档解释了这种现象的原因以及解决方法: 不准确的原因: 操作的是分片的集合(前提): shard分片正在做块迁移,导致有重复数据出现 存 ...

  4. C语言 · 扶老奶奶过街

    算法提高 扶老奶奶过街   时间限制:1.0s   内存限制:256.0MB      一共有5个红领巾,编号分别为A.B.C.D.E,老奶奶被他们其中一个扶过了马路. 五个红领巾各自说话: A :我 ...

  5. <孙阿姨炒股记:3500元炒出千万身家的股市智慧 >读书笔记

    书在这里 个人投资者要想在中国股市上生存,并且获利,首先要“胆子小” 国家方针政策要花力气去研究 不要听小道消息,比较天下没有免费的午餐 好公司不一定就能赚钱,好的买点药抓住,好的卖点更要抓住 趋势是 ...

  6. Postgresql分表与优化

    --1.创建主表 CREATE TABLE tbl_partition ( date_key date, hour_key smallint, client_key integer, item_key ...

  7. awk和sed (十二)

    [教程主题]:4.awk和sed [主要内容] [1]awk AWK是贝尔实验室1977年搞出来的文本出现神器.之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberg ...

  8. Vmware10 Centos7 共享文件夹设置方法

    先安装包依赖: yum -y install kernel-devel-$(uname -r) yum -y install net-tools perl gcc gcc-c++ 安装vm tool ...

  9. css table第一列 宽度

    table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...

  10. easyui使用介绍

    http://www.jeasyui.com/index.php based on jQuery, Angular and Vue. don't need to write many javascri ...