成都网站建设设计

将想法与焦点和您一起共享

css中内容出现滚动时不影响布局解决办法

最终我们需要的效果是:

创新互联是一家集网站建设,勃利企业网站建设,勃利品牌网站建设,网站定制,勃利网站建设报价,网络营销,网络优化,勃利网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

css中内容出现滚动时不影响布局解决办法

它的布局结构式这样的:

css中内容出现滚动时不影响布局解决办法

代码实现说明:

css中内容出现滚动时不影响布局解决办法

完整代码:







*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: calc(450px + 17px);
height: 400px;
background-color: greenyellow;
overflow: auto;
}
.container .inner-container{
overflow: hidden;
width: 450px;
background-color: #ccc;
padding: 10px;
padding-bottom: 0px;
}
.container .inner-container>div{
width: 100px;
height: 100px;
background-color:#D43F3A;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.container .inner-container>div:nth-child(4n){
margin-right: 0;
}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另一种效果:

css中内容出现滚动时不影响布局解决办法

它的布局结果是:

css中内容出现滚动时不影响布局解决办法

代码:

css中内容出现滚动时不影响布局解决办法

完整代码:













*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 490px;
height: 400px;
background-color: #ccc;
overflow: auto;
overflow-x: hidden;
}
.container .inner-container{
width: 490px;
padding: 10px 30px;
}
.container .inner-container>div{
width: 100px;
height: 100px;
background-color:#D43F3A;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.container .inner-container>div:nth-child(4n){
margin-right: 0;
}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



总结:

1 通过加一个中间层来处理出现的滚动条的影响

2 chrome下的滚动条的宽度是17px


网站题目:css中内容出现滚动时不影响布局解决办法
浏览地址:http://chengdu.cdxwcx.cn/article/pjgocd.html

其他资讯