正在回答
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往死了朝右“移”,他们就乖乖听话了。
好蛋疼啊。
相似问题
登录后可查看更多问答,登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星