css实现图片横向排列滚动
.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实现图片横向排列滚动的更多相关文章
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div+css+jQuery图片横向滚动代码(带左右点击按钮)
首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- css如何将图片横向平铺?
在CSS中,可以使用background(背景)属性来添加图片,默认图片是向x轴和y轴重复.那么css如何将图片横向平铺?下面本篇文章就来给大家介绍一下使用CSS将图片横向平铺的方法,希望对大家有所帮 ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...
- flash滑杆控制图片横向滚动
flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
随机推荐
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- mysql 乱码解决方案
如何解决MYSQL数据中文乱码问题? 第一种方法,总结: 经常更换虚拟主机,而各个服务商的MYSQL版本不同,当导入数据后,总会出现乱码等无法正常显示的问题,查了好多资料,总结出自己的一点技巧: WI ...
- centos 6.5 升级php到5.6.17版本
1. 下载php5.6.17版本:编译安装, ./configure --prefix=/usr/local/php5. --with-config-/etc --with-mysql=/usr/lo ...
- 【Unity】角色沿路线移动/朝着目标移动
先在场景中放置一连串物体作为角色移动路线的关键点,可以把关键点的触发器Trigger拉得大一些方便角色接触到(如酷跑/赛车类项目可以把关键点的触发器做成拦截整个道路的墙面形状).让角色从开始位置朝着第 ...
- Chrome 插件编写日记
Chrome 插件,你可以理解为打开了一个网页,但是里面只有前端语言,JavaScript, HTML + css 但是有一点区别的是,它是有一个名字为 manifest.json 的配置文件的,里面 ...
- js 日期格式化函数
直接上代码: // 日期格式化函数 // yyyy/MM/dd hh:mm:ss SSS ⇒ "2017/05/16 09:24:20 850" //"yyyy/M/d ...
- thymeleaf 解析html时,出现 SAXParseException: The content of elements must consist of well-formed characte
thymeleaf 解析html时,出现 SAXParseException: The content of elements must consist of well-formed characte ...
- C++ StringBuilder类
#ifndef __GTL_STRINGBUILDER_H_ #define __GTL_STRINGBUILDER_H_ #include <list> #include <str ...
- Python 文件操作三
文件重命名os模块中的rename()可以完成对文件的重命名操作rename(需要修改的文件名, 新的文件名) import os os.rename("11.txt", &quo ...
- Three ways to make your WPF images pop out on MouseOver
There are a couple of ways in WPF to make an image pop out when moving mouse over it. Of course we w ...