CSS基本布局16例

來源:互聯網
上載者:User

這段時間是一直在學習 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:寬度滿屏
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.