CSS基本布局16例

這段時間是一直在學習 div+css布局，感覺這段挺實用的，轉了過來，

以下布局資料原作者：Owen Briggs

單行單列

• 單行單列1：採用float浮在左上方，固定寬度。
• 單行單列2：固定在左上方，固定寬度，採用的是絕對(absolute)定位。
• 單行單列3：固定在左上方，不固定寬度，採用百分比(%)定義寬度來自適應頁面。
• 單行單列4(推薦)：固定寬度，採用在body樣式中定義置中屬性(text-align: center;)實現適應頁面自動置中。

單行兩列

• 單行兩列1：兩列都固定寬度。第一列浮在左上方，第二列浮在第一列右邊。
• 單行兩列2：兩列都百分比寬度，但不滿屏。第一列固定在左上方，第二列浮在第一列右邊。
• 單行兩列3：兩列都百分比寬度，滿屏。兩列都採用絕對位置。
• 單行兩列4：兩列都百分比寬度，滿屏。第一列浮在左上方，第二列浮在右上方。
• 單行兩列5：兩列都百分比寬度，滿屏。第一列浮在左上方，第二列浮在第一列右邊。

單行三列

• 單行三列1：左右列都絕對位置(右列定位在右上)。左列和右列固定寬度，中間列自適應頁面。
• 單行三列2：左列定位在左上，右列定位在右上，中間列浮在左列右面。左列和右列固定寬度，中間列自適應頁面。
• 單行三列3：三列都絕對位置。左列和右列固定寬度，中間列根據內容自適應。
• 單行三列4(推薦)：類似樣式2，只是將margin: 20px屬性增加在body樣式中，解決了中間列在Netscape6.0中置頂的問題。
• 單行三列5：左右列絕對位置，中間列自適應。寬度滿屏。

頂行三列

• 頂行三列1(推薦)：頂行自適應頁面寬度。左右列絕對位置，中間列自適應頁面。
• 頂行三列2：寬度滿屏