已有 39 次閱讀 2009-09-07 14:25 標籤: DIV CSS 網頁 寬度
使用浮動定位方式，從一列到多列的固定寬度及自適應，基本上可以簡單完成，包括三列的固定寬度。而在這裡給我們提出了一個新的要求，希望有一個三列式布局，基中左欄要求固定寬度，並居左顯示，右欄要求固定寬度並居右顯示，而中間欄需要在左欄和右欄的中間，根據左右欄的間距變化自動適應。這給布局提出了一個新的要求，而且單純使用float屬性與百分比屬性並不能夠實現，CSS目前還不支持度百分比的計算精確到考慮左欄和右欄的佔位，如果對中間欄使用100%寬度的話，它將使用瀏覽器視窗的寬度，而非左欄與右欄的中間間距，因此我們需要重新的思路來考慮這個問題。
絕對位置
在開始這樣的三列布局之前，有必要瞭解一個新的定位方式——絕對位置。前面的浮動定位方式主要由瀏覽器根據對象的內容自動進行浮動方向的調整，但是這種方式不能滿足定位需求時，就需要新的方法來實現，CSS提供的除去浮動定位之外的另一種定位方式就是絕對位置，絕對位置使用position屬性來實現。
position 用於設定對象的定位方式 可用值：static/absolute/relative
對頁面中的每一個對象而言，預設position屬性都是static。
如果將對象設定為position:absolute，對象將根據整個頁面的位置進行重新置放，當使用此屬性時，可以使用top,right,bottom,left即上右下左四個方向的距離值，以確定對象的具體位置，看如下CSS：
程式碼
#layout {
position:absolute;
top:20px;
left:0px;
}
如果#layout使用了position:absolute;將會變成絕對位置模式，與此同時，當設定top:20px;時它將永遠離瀏覽器視窗的上方20px，而left:0px;將保證它離瀏覽器左邊距為0px。
注意：一個對象如果設定了position:absolute;它將從本質上與其他對象分離出來，它的定位元模式不會影響其它對象，也不會被其它對象的浮動定位所影響，從某種意義上說，使用了絕對位置之後，對象就像一個圖層一樣浮在了網頁之上。
絕對位置之後的對象，不會再考慮它與頁面中的浮動關係，只需要設定對象的top,right,bottom,left四個方向的值即可。
而在本例中，使用絕對位置則能夠很好地解決我們所提出的問題。同樣，使用3個div形成我們的三個分欄結構：
程式碼
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
}
這樣，左欄將距左邊left:0px;貼著左邊緣進行顯示，而右欄則將由right: 0px;使得右欄距右顯示，而中間的#center將使用普通的CSS樣式：
程式碼
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}
對於#center，我們不需要再設定其浮動方式，只需要讓它有左邊外邊距永遠保持#lef與#right的寬度，便實現了兩邊各讓出202px的自適應寬度，而左右兩邊讓的距離，剛好讓#left和#right顯示在這個空間中，從而實現了而已要求。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三列左右固定寬度中間自適應it55.com</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
