HTML和CSS实现左侧固定宽度右侧内容可滚动

 admin  WEB  2020-01-31

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

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

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;

       width: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;

    width:25%;

    height:300px;

 

}

.right{

       display:inline-block;

       margin-left: 25%;

       width:75%;

       height:300px;

       background:yellow;

       white-space:nowrap;

       overflow-x:auto;

}

.right li{

     display:inline-block;

}

.right::-webkit-scrollbar{

  display:none;

}