一个背景色为粉色的父模块的高度和宽度都为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>
网友评论