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

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

lcyjerry 2019-08-04

源自：CSS网页布局基础 3-1 圣杯布局（了解即可）

2

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2019-08-04 19:19:00

你好，这就是窗口缩小之后的：

水平方向上出现滚动条，进行拖动查看即可，布局上是没有问题的。

可以再测试下。

lcyjerry 提问者 #1

这是圣杯布局吗？如果是的话，可以试下继续缩小浏览器窗口，到middle的width小于left的width的时候布局就会错乱

2019-08-04 19:24:40
lcyjerry 提问者 #2

这是我的源代码老师 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .container { padding: 0 220px 0 200px; } .left, .middle, .right { position: relative; float: left; min-height: 300px; } .middle { width: 100%; background: blue; } .left { width: 200px; background: black; margin-left: -100%; left: -200px; } .right { width: 220px; background: yellow; margin-right: -220px; } </style> </head> <body> <div class="container"> <div class="middle">1111111111111111111111111111111111</div> <div class="left"></div> <div class="right"></div> </div> </body> </html>

2019-08-04 19:27:01

好帮手慕码 2019-08-05 09:51:15

同学你好！

页面缩小到很小的时候是会出现布局乱的问题：

圣杯布局里有一个最小宽度的设置:计算公式是min-width=2*left+right。这是测试出来的结果，调整浏览器窗口的大小当中间的盒子小于左列宽度，布局就会乱，而大于等于左列宽度，布局就不会乱。

所以在同学的代码中，可以给body设置最小宽度 620：

如果帮助到了你欢迎采纳祝学习愉快~

好帮手慕星星 2019-08-04 18:42:02

同学你好，布局错乱指的是哪种情况呢？

这边测试源码是没有问题的哦：

是不是内容写的多了，给页面设置的最小宽度小了呢？

如果自己找不到问题，可以将写的代码粘贴上来，老师帮助你测试下。

祝学习愉快！

提问者 lcyjerry #1

你把浏览器窗口变小

2019-08-04 19:14:01

相似问题

老师，圣杯布局到底有什么优势呢

圣杯布局3-2案例

三栏布局

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

为什么我的圣杯会塌

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载