为了账号安全,请及时绑定邮箱和手机立即绑定

在三列布局中,已知三列的宽和高,如何确定margin的上右下左的边距

如题:例如如下代码:

div{ line-height:50px}
.left{ width:200px; height:600px; background:#ccc;position:absolute; left:0; top:0}
.main{ height:600px; margin:0 310px 0 210px; background:#9CF}
.right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;}

是如何确定margin的值的?   或者说为什么要将margin的值设置为如上几个值.margin:0 310px 0 210px

本人新手。谢谢各位的回复。拜谢

正在回答

2 回答

这个margin 是用在了中间那块上,这里margin 一共4个值  分别对应 上 右 下 左 ;对应到他给的值就是 上:0;右310px; 下:0; 左:210px;  因为他是左中右的布局,所以上下不用管,都是0,这个没有问题。说一下他的左右的值是怎么算出来的。先看左边的,他给的值是210px,再看一下他左边区域div的宽度,200px,而且是用定位放到了左边,因为他们是在一行上的,左边区域就会盖到中间区域上,所以中间的区域要把左边的区域的宽度空出来,也就是至少要空出200px 左边才能正好显示。他给了一个210px,也就是说多出了10个像素,这样的话左边就可以和中间有10个像素的间距,不至于2块连在一起。这就是这个210px的来源。再看右边310px,而他右边的区域用的是定位,定位到右边,而宽度是300px.而中间的那块这时会占住除左边以外的全部区域,所以靠右边的300px就会被右边区域给盖住,为了保证他的内容能完全显示,就必须把右边的300px也让出来。至于他给了310px也是为了有一个间距。

1 回复 有任何疑惑可以回复我~
#1

闹钟___你别闹 提问者

非常感谢。你的回答很详细清楚,谢谢!
2015-11-22 回复 有任何疑惑可以回复我~

.main 没有设置 width 属性,好像要设为100%。.left 是绝对定位,脱离文档流,覆盖住了 .main 的左边 margin,并与 .main 左边相距10px。.right 同理。

0 回复 有任何疑惑可以回复我~
#1

闹钟___你别闹 提问者

非常感谢,很简单明了。
2015-11-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

在三列布局中,已知三列的宽和高,如何确定margin的上右下左的边距

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信