亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

在三列布局中,已知三列的寬和高,如何確定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進行網頁布局
  • 參與學習       209565    人
  • 解答問題       1206    個

用最簡潔的案例教你布局的那些知識,這是前端工程師基本技能

進入課程

在三列布局中,已知三列的寬和高,如何確定margin的上右下左的邊距

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號