CSS網頁布局入門教程4:二列固定寬度_基礎教程

來源:互聯網
上載者:User
有了一列固定寬度作為基礎,二列固定寬度就非常簡單,我們知道div用於對某一個地區的標識,而二列的布局,自然需要用到兩個div,XHTML代碼如下:
複製代碼 代碼如下:
左列
右列

新的代碼結構中使用了兩個id,分別為left和right,表示兩個div的名稱,我們所需要做的是,首先為它們制定寬度,然後讓兩個div在水平行中並排顯示,從而形成二列式的布局,CSS代碼如下:
<!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>二列固定寬度——AA25.CN</title> <style type="text/css"> <!-- #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 200px; } --> </style> </head> <body> 左列 右列 </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
left與right兩個div的代碼與前面類似,都使用相同寬高,本例中為了區分,左列和右列分別用了不同的邊框和背景色。而為了實現二列式布局,我們使用了一個全新的屬性——float。float屬性是CSS布局中非常重要的一個屬性,用於控制的浮動布局方式,我們的大部分div布局基本上都通過float的控制來實現布局,float的選擇性參數為:none/left/right。
float使用none值時表示對象不浮動,而使用left時,對象將向左浮動,例如本例中的div使用了float:left;之後,右側的內容將流到當前對象的右側。使用right時,對象將向右浮動,如果將left的float值設定為right,將使得left對象浮動到網頁右側,而right對象則由於float:left;屬性浮動到網頁左側。
這樣,在動用了簡單的float屬性之後,二列固定寬度的而已就能夠完整的顯示出來。
具體操作步驟如下:
建立頁面,插入div可以參考:CSS網頁布局入門教程1:一列固定寬度
當插入一個div後,接著插入第二個時,在插入div標籤的插入會多出一個選項:在選定內容旁換行,這樣插入就把這個div標籤插入到了id為left的div之內,這並不是本例所要的結果,所以我們選擇在標籤之後,然後在右側啟用的下拉式清單中找到,這樣我們插入的id為right的div就插入到了left的後邊。如所示:


left的css設定如下:







right的設定只有與left的邊框和背景色不同而已,可以參照left的自行設定。

  • 相關文章

    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.