关于圣杯布局和双飞翼布局如何让页面两边留白

这两种布局都是布满整个页面的，我希望实现页面两边留白，中间内容居中并应用这两种布局的效果

夜sama 2017-04-19

源自：CSS网页布局基础 3-4 双飞翼布局及案例

35

收起

4回答

慕仔2374253 2017-04-30 11:02:25

圣杯布局那个给container设置width:%;magin:0 auto;亲测是可以的

提问者夜sama 2017-04-25 14:12:29

=-= 求老师解答

一路电光带火花 2017-04-19 16:32:52

可以在整体外面套一个盒子，设置盒子的宽度（盒子的宽度小于页面的宽度就有留白了），然后给盒子设置margin:0 auto;属性使盒子居中。盒子里面再设置这两种布局就行了。

提问者夜sama #1

我试过，应该是不行的，如果在外边嵌套一个盒子的话，他只能限制main内容宽度，left和right由于设置了position：relative是不能被控制的，他们同样会留在页面的最左右端，而且就算给container设置的padding值放大两倍，同时给left和right的margin，left,right值更改，页面不缩放的话效果是实现了，可是一旦页面开始缩放，right的内容没问题，left内容由于等比扩大设置的是-120%（举个例子），这样导致left左侧内容是无法做到圣杯布局的效果的

2017-04-21 08:09:09

程序学习袁 2017-04-19 16:22:47

那你可以再布局外面再加一个盒子然后让这个盒子与页面两边有距离然后让这个盒子居中显示嘛

提问者夜sama #1

问题同上喔，辛苦啦

2017-04-21 08:09:39

相似问题

老师，我觉得你写的双飞翼布局的代码可以优化啊?你看看我优化后的代码。

双飞翼布局

通过padding和margin 留白有什么区别吗

三栏布局

老师圣杯布局和双飞翼布局的区别在哪呢

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36712 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号