关于圣杯布局的问题没明白...

关于圣杯布局的问题没明白...

老师圣杯布局中间部分没懂什么意思。  那个中间左右浮动和margin﹣100%没懂什么原理.....老师可以详细讲解下吗,谢谢了。

正在回答 回答被采纳积分+1

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

1回答
好帮手慕星星 2018-04-04 11:06:40

以老师的圣杯布局为例:

中间的布局方式:

http://img1.sycdn.imooc.com//climg/5ac43d930001737d04240196.jpg

给container设置了左右的padding值,如下:

http://img1.sycdn.imooc.com//climg/5ac43db600017a6304340104.jpg

给middle设置了width宽度为100%之后,显示如下:

http://img1.sycdn.imooc.com//climg/5ac43df90001664b19150605.jpg

中间三个div都设置了浮动,排列在一排显示,但是middle就占据了100%的宽度,所以把left和right给挤下来了。想要left移动到上边,设置margin-left为负值,向左移动,你可以想象它们三个在一排,

http://img1.sycdn.imooc.com//climg/5ac4402000011ab110030254.jpg

left向左走到最左边就需要设置margin-left为负值,设置-100%的话,就会移动到container最左边,left移动之后,right就占据了left的位置,right也要向左走,移动自身宽度就可以了,也就是-220px,移动之后显示如下:

http://img1.sycdn.imooc.com//climg/5ac440e40001a2b719130300.jpg

左右两侧覆盖了middle的一部分内容,然后设置两个为相对定位,left向左移动自身宽度,也就是left:-200px;,right向右移动自身宽度,也就是right:-220px;,显示如下:

http://img1.sycdn.imooc.com//climg/5ac441270001802119200305.jpg

自己再理解下,祝学习愉快~~

  • 提问者 qq_我想吃掉你_0 #1
    老师,margin-left:负值的单位一定得是百分比才能向上移动吗?假如80%呢?
    2018-04-04 12:38:50
  • 可以是具体的数值像素,但是每个显示器的分辨率不同,百分比以及像素的显示效果也会不同,所以-100%,才永远在最左边。
    2018-04-04 13:40:38
  • 老师,left和right虽然被挤下来了。其实它们还是在一行显示的,这样理解可以吗?
    2018-04-04 13:50:14
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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