3-2圣杯布局案例，body最小值700

当body最小值700时，把主体的margin左右220，200值调高，就会出现布局混乱，请问body最小值是如何计算的？.left为什么右侧会有一个自动调整的margin-right?

人生漫慢 2018-03-14

源自：CSS网页布局基础 3-2 圣杯布局案例

32

收起

2回答

怎么都被占用了呢 2018-03-14 14:42:14

圣杯布局中，为了让left块在第一行的左侧显示，所以使用了margin-left:-100%的技巧，因为margin-left为负值，会让元素向左移动。

页面缩小布局不乱的临界值是：left块宽度+right块宽度+middle块宽度（和left块宽度保持一致），平时为了保险起见，我们可以将min-width的值适当设大一些。

怎么都被占用了呢 2018-03-14 14:07:18

以老师的代码为例，

body的宽度设为220+200+200=620是恰好的。

如果像你这样修改后

body的最小宽度就要设为320+200+200=720是刚好的。

为了不让它们混乱，页面缩小到的临界值就是left块的宽度、right块的宽度，middle块宽度（最小的时候和left块宽度保持一致）。

提问者人生漫慢 #1

margin-left:-100% 代表相对.middle这个div 预留了一个和.left同样宽度的块是吗？感觉自己表达的不是很清楚，margin-left:-100% 此代码代表的含义是什么？220+200+200=620；此处是.right宽+.left宽+预留的宽（margin-left:-100%）=620；是这样计算的之吗？

2018-03-14 14:14:57
格格巫加油 #2

为什么最小的时候left要和middle宽度保持一致啊

2018-05-24 21:17:10
好帮手慕糖回复格格巫加油 #3

你好，设置整体的最小值需要满足min-width >= 2X+Y;其中X指左边块的宽度，Y为右边块的宽度，所以最小值需要大于等于两个左边块与一个右边块的宽度之和。等于的时候，是临界值。祝学习愉快~

2018-05-25 09:21:10

相似问题

圣杯布局3-2案例

圣杯布局，左边宽度必须大于右边吗，如果左边宽度小于右边宽度，2X+Y还成立吗

3-2圣杯布局案例

3-2圣杯布局

为什么圣杯布局在我改变浏览器页面大小时，布局会错乱呀？

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

前端小白入门系列课程

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

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

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

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

378 40

到底是cellspacing还是cellpacing?

0 35

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

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载