zoukankan      html  css  js  c++  java
  • CSS+HTML实现移动端div左右滑动展示(转载)

    废话不多说,直接上源码!!!!

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .div {
                overflow: hidden;
                height: 118px;
            }
    
            .box {
                background: #eee;
                padding: 10px 0;
                white-space: nowrap;
                /*文本不会换行,文本会在在同一行上继续*/
                overflow-y: auto;
                /*可滑动*/
            }
    
            /*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
            .box::-webkit-scrollbar {
                display: none;
            }
    
            .box1 {
                width: 49%;
                margin-left: 3%;
                height: 100px;
                background: #fff;
                display: inline-block;
                /*行内块元素*/
            }
        </style>
    </head>
    
    <body>
      <!--外部嵌套层-->
    <div class="div">
        <div class="box">
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
        </div>
    </div>
    </body>
    
    </html>

    运行效果

    转载自博客园 不睡:(https://www.cnblogs.com/bushui/p/11536553.html

  • 相关阅读:
    优化webstorm打开项目速度
    组件 -- Button
    组件 --BreadCrumb--面包屑
    组件 -- Badge
    组件 -- Alert
    表格-table 样式
    image 样式设置
    文本和字体样式设置
    bootstrap-网格系统
    c#方法
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/12021603.html
Copyright © 2011-2022 走看看