zoukankan      html  css  js  c++  java
  • HTML和CSS实现左侧固定宽度右侧内容可滚动

    在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。

    处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。最重要的是,需要左右滚动的内容需要设置属性white-space: nowrap(规定段落中的文本不进行换行)。一般移动端左右滑动不需要显示滚动条,此时可以设置.element::-webkit-scrollbar {display:none}

    Demo:

    HTML:

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>模板</title>

    <link href="css/style.css" rel="stylesheet" type="text/css">

    </head>

    <body>

       <div>

         <div class="normal-div first">

         </div>

         <div class="normal-div second">

         </div>

         <div class="normal-div third">

            <div class="left"></div>

            <div class="right">

              <ul>

                   <li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>

                  <li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>      

                   <li>额风格的规划法大好人和交通局对符合人体会让对方回复都很反感发帖蝴蝶夫人诞生于红烧肉</li>

              </ul>

            </div>

         </div>

       </div>

    </body>

    </html>

     

    CSS:

    .normal-div{

           height:300px;

           100%;

           background:red;

    }

    .second{

           background:blue;

    }

    .third{

           position:relative;

           background:grey;

           font-size:18px;

    }

    .left{

           display:inline-block;

           position:absolute;

           top:0;

           left:0;

           background:green;

        25%;

        height:300px;

     

    }

    .right{

           display:inline-block;

           margin-left: 25%;

           75%;

           height:300px;

           background:yellow;

           white-space:nowrap;

           overflow-x:auto;

    }

    .right li{

         display:inline-block;

    }

    .right::-webkit-scrollbar{

      display:none;

    }

     

  • 相关阅读:
    axure 用中继器实现下拉多选框
    excel 常用全局变量
    win10 x64 python3.6 pycharm 安装statsmodels
    Oracle 10进制转36进制
    概念数据模型设计与逻辑数据模型设计、物理数据模型设计的关系
    does not support ASP.NET compatibility 错误
    Oracle日志文件管理与查看
    oradmin相关用法
    Oracle Standby Database 实现方案
    c# 调用zebra打印指令 打印到USB端口
  • 原文地址:https://www.cnblogs.com/ranyonsue/p/8064455.html
Copyright © 2011-2022 走看看