非常好的CSS基本佈局16例_基礎教學

單行單列

單行單列1：採用float浮在左上角，固定寬度。

#content { float: left; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400px; /* ie5win fudge begins */ vo-family: "\}family ""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

單行單列2

：固定在左上角，固定寬度，採用的是絕對(absolute)定位。

#content { position: absolute; top: 0px; left: 0px; padding: 10px; margin: 20px; background: #FFF; border: 5px solid #666; width: 400piw /* -family: "\"}\""; voice-family:inherit; width: 370px; }html>body #content { width: 370px; /* ie5win fudge ends */ }

單行單列3：固定在左上角，不固定寬度，以百分比(%)定義寬度來自適應頁。

單行單列4

(建議)：固定寬度，採用在body樣式中定義居中屬性(text-align: center;)實現適應頁面自動居中。 單行兩列

單行兩列1

：兩列都固定寬度。第一列浮在左上角，第二列浮在第一列右邊。

單行兩列2

：兩列都百分比寬度，但不滿螢幕。第一列固定在左上角，第二列浮在第一列右邊。

單行兩列3：兩列都百分比寬度，滿屏。兩列都採用絕對定位。

單行兩列4

：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在右上角。

單行兩列5

：兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在第一列右邊。

單行三列

單行三列1

：左右列都絕對定位(右列定位在右上)。左列和右列固定寬度，中間列自適應頁。

單行三列2：左列定位在左上，右列定位在右上，中間列浮在左列右面。左列和右列固定寬度，中間列自適應頁。

單行三列3：三列都絕對定位。左列和右列固定寬度，中間列依內容自適應。

單行三列4(建議)：類似樣式2，只是將margin: 20px屬性增加在body樣式中，解決了中間列在Netscape6.0中置頂的問題。

單行三列5

：左右列絕對定位，中間列自適應。寬度滿屏。

頂行三列

頂行三列1(建議)：頂行自適應頁寬度。左右列絕對定位，中間列自適應頁面。

• 頂行三列2

：寬滿屏