在做移動端頁面的時候，經常會碰到一個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;
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;
}