終于寫對了，但是還有個問題不明白，求解？

*{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

關注問題我要回答

497

操作

收起

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中的位置。