中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

第三步：把左邊欄放在左邊

現(xiàn)在我們要干的是怎么樣讓這三欄在一行，中間的容器已經(jīng)完全符合我們的要求了，我們只需要關(guān)注剩下的兩個，先從左邊的開始。
需要兩步讓左邊欄在左邊.第一步:讓他以100%的負(fù)margin(margin-left: -100%;)穿過中間的層，記住一定要用100%，因?yàn)橹虚g的層的寬度是100%.

#left {
  width: 200px;        /* LC width */
  margin-left: -100%; 
}

現(xiàn)在左邊欄和中間欄重合，左邊重合，右邊欄浮動過來（雖然還是掉下去了），現(xiàn)在的結(jié)果變成了下面的樣子：

第二步:現(xiàn)在要把左邊欄拉到正確的位置，我們使用相對定位來抵消左邊欄的寬度

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%; 
  right: 200px;        /* LC width */
}

因?yàn)樵O(shè)置了right: 200px;所以左邊欄被中心層的右邊推遠(yuǎn)了200px，剛好到了左邊。（The right property pushes it 200px away from the right edge; that is, to the left.）現(xiàn)在左邊欄剛好完美的到了他應(yīng)該到的位置

第四步：把右邊欄放到右邊

剩下的事就是把右邊欄放在右邊，需要把他拉出容器放在容器的padding上，我們依然利用負(fù)邊距。

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

現(xiàn)在所有的東西都在他該在的位置上了，沒有誰”掉隊(duì)”,呵呵。

出處：Alipay UED
責(zé)任編輯：moby

上一頁 尋找圣杯 [3] 下一頁 尋找圣杯 [5]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。