专栏首页前端开发随笔Css实现内容溢出添加横向滚动条

Css实现内容溢出添加横向滚动条

先放一张效果图

在这里每一个div标签包裹着一张图片和一行文字 以下代码直接copy看效果

        <div class="banner">
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
          <div class="one">
            <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片">
            <p>元气少女妆</p>
          </div>
        </div>
.banner {
      width: 100%;
      height: 100%;
      overflow-x: scroll; /*添加横向滚动条*/
      white-space: nowrap;/*不换行*/
    }

    .one {
      width: 45%;
      margin-right: 2%;
      display: inline-block;/*设为inline-block*/
    }

    .one img {
      width: 100%;
      height: 80%;
    }

    .one p {
      font-size: 18px;
      margin-left: 20px;
      margin-top: 10px;
      color: #FFF;
    }

css注释的搭配才有效

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Css实现瀑布流布局

    我们只需要设置最外层的父级(waterfall)和子级的父元素(poster)的css就可以

    任我行RQ
  • swiper.animate实现轮播展示动画效果

    任我行RQ
  • Js反引号遍历数值

    任我行RQ
  • Python+selenium+unittest+HTMLTestReportCN单元测试框架分享

    unittest是Python语言的单元测试框架,在Python的官方文档中,对unittest单元测试框架进行了详细的介绍,感兴趣的读者可以到 https:/...

    测试小兵
  • 前端框架Vue入门

    Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第...

    chaplinthink
  • 21 vue 组件中 Class 的绑定

    对于样式类的绑定,使用v-bind就能满足需求,但vue为class的绑定作了特别的优化。

    李艺
  • Java 程序员须知道和掌握的 Linux 命令

    美的让人心动
  • 前端小知识10点(2020.6.28)

    ① DOMContentLoaded 等构件完 dom 树,js 加载完后才会触发

    进击的小进进
  • Concurrent Hash Map源码阅读参考链接

    大家都知道HashMap是线程不安全的,想要在并发的环境中使用,用什么呢?HashTable?采用syncgronized加锁,导致效率及其底下.在java5之...

    呼延十
  • Python 自动化运维 difflib

    py3study

扫码关注云+社区

领取腾讯云代金券