专栏首页前端小叙css实现图片横向排列滚动

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;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js实现图片粘贴上传到服务器并展示

    最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEvent...

    蓓蕾心晴
  • jquery获取select多选框选中的值

    蓓蕾心晴
  • Vue.js 2.0 学习重点记录

    Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 V...

    蓓蕾心晴
  • 3分钟搞定图片懒加载

    图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页)。

    Daotin
  • 微信小程序学习笔记:实现tab切换和for循环嵌套

    上面部分是Tab标签,点击会出现选中效果,下面部分是内容框,随着tab标签的切换而且换。

    德顺
  • Python——献给那些对Python面

        面向对象,看似不难。有的同学学过之后,还是不知道如何去使用它。有时候编写代码,写着写着就遇到坑了,比如写着写着就连你自己也在怀疑到底是不是面向对象编程了...

    py3study
  • ol3中妙用Arcgis Server Rest Export接口模拟WMS,并实现属性过滤

    在本文,讲述如何妙用Arcgis Server的REST Export接口实现WMS服务的调用和图层的属性过滤。

    lzugis
  • python 网络设备远程自动化

    以谁为师
  • did not find expected key

    持续集成时报错:yaml: line 18: did not find expected key

    拓荒者
  • 写代码怎能不会这些 Linux 命令?

    当你将Dos系统中的文件复制到Unix/Linux后,这个文件每行都会以\r\n结尾,sed可以轻易将其转换为Unix格式的文件,使用\n结尾的文件

    lyb-geek

扫码关注云+社区

领取腾讯云代金券