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">css布局左边固定右边自适应
<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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。