终于写对了，但是还有个问题不明白，求解？

*{margin:0; padding:0;}
#wrap{width:970px;margin:0px auto;}
#mainbody{ position:relative;margin-top:15px;}
#left{float:left;margin-right:13px;width:110px; }
#mid{float:left;width:650px;border:1px solid #999;}
#right{position:absolute;margin-left:790px;border:1px solid #999;}

任务2：使用浮动实现#left和#mid横向两列排版，并且两者之间有13px间距; 为什么不能写成#mid{float:left;margin-left:123px;width:650px;border:1px solid #999;} ???为啥在#right里面margin-left：790px？？？

坚持1次

2017-04-18

源自：网页布局基础 5-1

关注问题我要回答

483

操作

收起

3 回答

慕圣4428291
2017-05-26

可以啊，你在#mid里面用margin-left也行，不过相比在#left里面设置margin-left计算量复杂了一点，容易失误而已。另外#right里面的margin-left等于790px的计算为：left的宽（109px）+与Mid之间的marigin-left的距离(13px)+mid的左右border宽度(2*1px）+mid的宽（649px）+距离mid的距离(17px)=790px

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

收起回答

qq_谷子菜fw_0
2017-05-02

任务2：使用浮动实现#left和#mid横向两列排版，并且两者之间有13px间距;

代码应该这样写#mid{float:left;margin-left:13px;width:650px;border:1px solid #999;}

margin-left:13px;而不是123px；因为mid虽然设置了浮动，脱离了文档流，但是它还是跟随在left之后的，也就是说它的定位参考是以left为基准的（这样讲可能有点问题，但是好理解些），mid与left两个块在表现形式上从垂直两行变成了横向一行，所以这里设置它的margin-left值的是它与left之间的间距值

#right里面设置margin-left：790px，是因为我们给right设置了绝对定位，它脱离了文档流，它的定位参考是以mainbody为基准的，那么在给right定位时，我们就只要考虑它在mainbody中的位置。