單行單列

  • 單行單列 單行單列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:左右列絕對定位,中間列自適應。寬度滿屏。

頂行三列

.