在三列布局中,已知三列的寬和高,如何確定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
本人新手。謝謝各位的回復。拜謝
2015-11-21
這個margin 是用在了中間那塊上,這里margin 一共4個值 ?分別對應 上 右 下 左 ;對應到他給的值就是 上:0;右310px; 下:0; 左:210px; ?因為他是左中右的布局,所以上下不用管,都是0,這個沒有問題。說一下他的左右的值是怎么算出來的。先看左邊的,他給的值是210px,再看一下他左邊區域div的寬度,200px,而且是用定位放到了左邊,因為他們是在一行上的,左邊區域就會蓋到中間區域上,所以中間的區域要把左邊的區域的寬度空出來,也就是至少要空出200px 左邊才能正好顯示。他給了一個210px,也就是說多出了10個像素,這樣的話左邊就可以和中間有10個像素的間距,不至于2塊連在一起。這就是這個210px的來源。再看右邊310px,而他右邊的區域用的是定位,定位到右邊,而寬度是300px.而中間的那塊這時會占住除左邊以外的全部區域,所以靠右邊的300px就會被右邊區域給蓋住,為了保證他的內容能完全顯示,就必須把右邊的300px也讓出來。至于他給了310px也是為了有一個間距。
2015-11-21
.main 沒有設置 width 屬性,好像要設為100%。.left 是絕對定位,脫離文檔流,覆蓋住了 .main 的左邊 margin,并與 .main 左邊相距10px。.right 同理。