解决导航条占宽度让内容换行了
2018-09-29 本文已影响4人
Lia代码猪崽
一个背景色为粉色的父模块的高度和宽度都为200px，子模块的宽度为100px，这样一行刚好可以放下两个，高度为50px。但是，如果当出现了八个以上，也就是四行以后，由于垂直方向的滚动条的出现，会占用到父模块的宽度，一行就不能放下两个子模块了，子模块会自动换行。如图所示：
不知不觉换行了
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>不让滚动条影响内容宽度</title>
<style>
.parent {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
overflow-x: hidden;
overflow-y: auto;
}
.children{
float: left;
display: inline-block;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
</div>
</body>
</html>
解决方案：加一个中间层（over），比父层的宽度多大约20px（据说导航条的宽度都是20px），就可以解决了。
overflow-x: hidden;能避免水平方向的导航条出现。
一行能显示两个
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<title>不让滚动条影响内容宽度</title>
<style>
.parent {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
overflow-x: hidden;
overflow-y: auto;
}
.over {
display: inline-block;
width: calc(100% + 20px);
height: 100%;
}
.children{
float: left;
display: inline-block;
width: 100px;
height: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="over">
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
<div class="children">123</div>
<div class="children">321</div>
</div>
</div>
</body>
</html>
