水平滚动条

一行超出的内容默认是垂直方向显示滚动条,如果需要水平方向滚动条

主要用到并排Div 的父级设置white-space: nowrap,并排的div设置display:inline-block;

因为display:inline-block 会引起几个像素的空隙,需要在父级设置font-size:0;可以去掉相邻小div的空隙

完整的代码如下:

<div class="" id="ta_1" style="overflow-x:auto;">
    <div class="all-smallImg-wrap">
        <div class="smallImg-wrap">
            <div class="smallImg">
                <img src="../../dist/img/login-bg1.jpg" alt="" />
            </div>
            <div class="title">标题11</div>
        </div>
        <div class="smallImg-wrap">
            <div class="smallImg">
                <img src="../../dist/img/login-bg1.jpg" alt="" />
            </div>
            <div class="title">标题11</div>
        </div>
        <div class="smallImg-wrap">
            <div class="smallImg">
                <img src="../../dist/img/login-bg1.jpg" alt="" />
            </div>
            <div class="title">标题11</div>
        </div>
    </div>
</div>
.all-smallImg-wrap{height:160px;white-space: nowrap;font-size:0;}
.smallImg-wrap{width:25%;display:inline-block;height:160px;padding-right:15px;}
.smallImg-wrap .smallImg{border:1px solid #ccc;text-align:center;display:table-cell;width:1%;vertical-align:middle;height:130px}
.smallImg-wrap .smallImg img{max-width:100%;max-height:100%;}
.smallImg-wrap>div.title{text-align:center;line-height:30px;font-size:14px;}

(adsbygoogle = window.adsbygoogle || []).push({});

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web完全响应式布局 原

    在页面布局中响应式布局优势很明显,能适应不同的屏幕,现在很多的网站系统也都是响应式布局

    tianyawhl
  • vueRouter-嵌套路由 原

    实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,

    tianyawhl
  • WebUploader 一个页面多次实例化封装

    上传图片网上找了比较好的插件WebUploader,但是在一个页面中2次实例化会有问题,现把插件封装了下,例子直接copy可以使用。如果上传失败再次需要上传的话...

    tianyawhl
  • Laravel删除产品-CRUD之delete(destroy)

      上一篇讲了Laravel编辑产品-CRUD之edit和update,现在我们讲一下删除产品,方法和前面的几篇文章类似,照着ytkah来操作吧

    ytkah
  • 【小三传奇】这是一个关于游戏的故事

    其实,这里要讲的,是关于一个游戏的故事,这个游戏的名字叫做小三传奇,曾经在ios平台上面很火的一款游戏。网上2048方面的教程很多,于是动了自己弄一个小三传奇的...

    IMWeb前端团队
  • 【小三传奇】这是一个关于游戏的故事

    咳咳,如果你是被标题吸引过来的,只能说明你思想不太纯洁。 其实,这里要讲的,是关于一个游戏的故事,这个游戏的名字叫做小三传奇,曾经在ios平台上面很火的一款游戏...

    IMWeb前端团队
  • 初学者必知的HTML规范

    超然
  • CSS3实现饼图扇形loading效果

    2. 当我们煎饼动画转起的一瞬间,我们让假的饼子隐藏回家打酱油去。于是,从上面看,我们看到的就是满满一层的鸡蛋。

    javascript.shop
  • css布局使用

    目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

    听城
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动