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

三人行

如果想做三欄布局的話該怎么辦?沒問題,而且在使用絕對定位時很容易加入.只需要為主內(nèi)容,也為加上左外補丁,大小足夠容納第三欄即可.

另一個側(cè)邊欄能夠放在標記源代碼之內(nèi)任何地方,因為會需要再度使用絕對定位進行布局.

假設加了第二個側(cè)欄,并將它取名# sidecolumn,接著以下面這段CSS為它空出位置,再把它放進去.

body {
  margin: 0;
  padding: 0;
  }
#header {
  height: 40px;
  background: #ccc;
  }
#content {
  margin-right: 24%;
  margin-left: 24%;
  }
#sidecolumn {
  position: absolute;
  top: 40px;
  left: 0;
  width: 20%;
  background: #999;
  }
#sidebar {
  position: absolute;
  top: 40px;
  right: 0;
  width: 20%;
  background: #999;
  }
#footer {
  margin-right: 24%;
  margin-left: 24%;
  padding: 20px;
  background: #eee;
  }

剛才完成的部分是在主內(nèi)容,頁尾區(qū)空出左外補丁(避免重疊),與之前做右側(cè)邊欄一樣,接著以絕對定位法放進新的#sidecolumn ,將它放在距離上邊緣40像素,距離左邊緣0像素的位置.

你有留意我們稍微修正了寬度以容納第三欄嗎?由于我們使用百分比,因此這個布局會隨著瀏覽器的寬度縮放,或者也可以為任何一欄指定像素寬度,以便使布局寬度固定下來.

圖12-10是用瀏覽器查看這個示例的效果,一份以CSS絕對定位完成的靈活三欄布局.

圖12-10 以定位法作出的靈活三欄布局

出處：藍色理想
責任編輯：bluehearts

上一頁 標記語言——CSS布局 [5] 下一頁 標記語言——CSS布局 [7]

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