| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS布局之浮動(二)

2008-08-16 07:22:39  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

在上一個文章裏寫了關于左(右)側定寬右(左)側自動縮放的兩列浮動,這個文章就要說一下三列浮動的問題了。在之前說過,兩列浮動是其他多列浮動的基礎,明白了兩列浮動的原理後,三列或三列以上的多列浮動也變得簡單。

左側中間定寬,右側自適應:

因邊左側跟中間都是定寬的,只有右側是自適應寬度的,所以這個三列浮動是和兩列浮動中的左側定寬右側自適應一樣的道理,HTML結構代碼如下:

<!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=utf-8″ />

<title>CSS浮動</title>

</head>

<body>

<div id=」a」>我是左邊</div>

<div id=」b」>我是中間</div>

<div id=」c」>我是右邊</div>

</body>

</html>

只需在兩列浮動的CSS樣式代碼上再做輕微的改動:

#a{float:left; width:200px; background:#aaa;}

#b{float:left; width:200px; background:#f00;}

#c{background:#777; margin-left:400px;}

當然這裏要記住一點,那就是必須給b對象一個左浮動。

左側自適應,中間右側定寬:

與左側中間定寬右側自適應一樣的道理,當然前提是要把a、b、c三個對象在HTML的結構代碼上更換一下順序,浏覽器的解釋順序應該是c-b-a,因爲浮動在未浮動之前:

<body>

<div id=」c」>我是左邊</div>

<div id=」b」>我是中間</div>

<div id=」a」>我是右邊</div>

</body>

CSS代碼如下:

#a{background:#aaa;}

#b{float:right; width:200px; background:#f00;}

#c{float:right; width:200px; background:#777;}

左右兩側定寬,中間自適應:

這個布局應該是用得最多的,因爲兩邊側邊欄的定寬,然後中間內容區自適應,這是很多網站常用的布局方式。很多人會在這裏使用四個DIV來完成布局,即:

<body>

<div id=」a」>我是左邊</div>

<div id=」box」>

<div id=」b」>我是中間</div>

<div id=」c」>我是右邊</div>

</div>

</body>

通過一個嵌套的DIV來幫助完成三列浮動,這樣的確是可以完成浮動布局的目的,但是不用這個嵌套仍然可以完成三列浮動的目的,既然可以省略一個嵌套,那爲什麽不省略一個呢?僅僅只需改變b跟c兩者的順序即可達到目的:

<body>

<div id=」a」>我是左邊</div>

<div id=」c」>我是右邊</div>

<div id=」b」>我是中間</div>

</body>

CSS代碼如下:

#a{float:left; width:200px; background:#aaa;}

#b{margin-left:200px; margin-right:200px; background:#f00;}

#c{float:right; width:200px; background:#777;}

這樣,在基于兩列浮動的基礎之上,三列浮動的布局也完成了。

出處:http://www.prower.cn/technic/195

在上一個文章裏寫了關于左(右)側定寬右(左)側自動縮放的兩列浮動,這個文章就要說一下三列浮動的問題了。在之前說過,兩列浮動是其他多列浮動的基礎,明白了兩列浮動的原理後,三列或三列以上的多列浮動也變得簡單。 左側中間定寬,右側自適應: 因邊左側跟中間都是定寬的,只有右側是自適應寬度的,所以這個三列浮動是和兩列浮動中的左側定寬右側自適應一樣的道理,HTML結構代碼如下: <!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=utf-8″ /> <title>CSS浮動</title> </head> <body> <div id=」a」>我是左邊</div> <div id=」b」>我是中間</div> <div id=」c」>我是右邊</div> </body> </html> 只需在兩列浮動的CSS樣式代碼上再做輕微的改動: #a{float:left; width:200px; background:#aaa;} #b{float:left; width:200px; background:#f00;} #c{background:#777; margin-left:400px;} 當然這裏要記住一點,那就是必須給b對象一個左浮動。 左側自適應,中間右側定寬: 與左側中間定寬右側自適應一樣的道理,當然前提是要把a、b、c三個對象在HTML的結構代碼上更換一下順序,浏覽器的解釋順序應該是c-b-a,因爲浮動在未浮動之前: <body> <div id=」c」>我是左邊</div> <div id=」b」>我是中間</div> <div id=」a」>我是右邊</div> </body> CSS代碼如下: #a{background:#aaa;} #b{float:right; width:200px; background:#f00;} #c{float:right; width:200px; background:#777;} 左右兩側定寬,中間自適應: 這個布局應該是用得最多的,因爲兩邊側邊欄的定寬,然後中間內容區自適應,這是很多網站常用的布局方式。很多人會在這裏使用四個DIV來完成布局,即: <body> <div id=」a」>我是左邊</div> <div id=」box」> <div id=」b」>我是中間</div> <div id=」c」>我是右邊</div> </div> </body> 通過一個嵌套的DIV來幫助完成三列浮動,這樣的確是可以完成浮動布局的目的,但是不用這個嵌套仍然可以完成三列浮動的目的,既然可以省略一個嵌套,那爲什麽不省略一個呢?僅僅只需改變b跟c兩者的順序即可達到目的: <body> <div id=」a」>我是左邊</div> <div id=」c」>我是右邊</div> <div id=」b」>我是中間</div> </body> CSS代碼如下: #a{float:left; width:200px; background:#aaa;} #b{margin-left:200px; margin-right:200px; background:#f00;} #c{float:right; width:200px; background:#777;} 這樣,在基于兩列浮動的基礎之上,三列浮動的布局也完成了。 出處:[url=http://www.prower.cn/technic/195]http://www.prower.cn/technic/195[/url]
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有