3-2圣杯布局案例

3-2圣杯布局案例


不懂right中margin-left:-220px,也什么设置之后,就跑到页面内容的右边去了呢

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

这就是圣杯布局的技巧了,这里是有点不好理解,你可以先这么记住。实际开发中,还是普通的布局使用的多一些。祝学习愉快!

慕雪4154088 2017-09-29 23:22:59

发明圣杯布局的人真是够够的了,常规布局不好吗!

container 左右分别设置了内边距,将 middle、left、right 同时进行左浮动,按照定义:浮动元素碰到其他元素的边框就会停下来。也就是说在 middle、left、right盒子左边有留白200px、右有留白220px。所以就出现了【上middle,下left&right】的情况。此时!把宽度为220px的right盒子进行 margin-right=-200px,它先完成“右移”,刚好在它的正上方有宽度合适的空位,没有东西挡着它,它就会乘机滑上去,跟middle并列,靠在middle右边。

left盒子滑入空位的过程真几把蛋疼额。我是这样理解的,由于浮动后的元素们是“自右向左”【排列的】,由于空间位置有限,他们三才会出现上边说的【上m,下l&r】的布局,综上,对left设置 margin-left=-100%(这里可以理解成左负无穷都木有问题),它会跑到middle的左上角去,最后把它的相对定位的 left值设置成 -200px ,他就滑入空位了。


left 往死了朝左“移”,right往死了朝右“移”,他们就乖乖听话了。

好蛋疼啊。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

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

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师