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

CSS布局之浮動(一)

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

CSS浮動一直是個比較讓人郁悶的問題,很多的布局問題都出在浮動上,特別是當浮動的列數很多時,但其實只要理解了兩列結構的浮動,面對多列數的浮動也不會再心慌,因爲兩列結構的左右浮動是最基本的浮動,也是更多浮動的基礎,三列、四列等的浮動都是出于此的。

來看一下幾種常見的CSS兩列浮動,CSS代碼見以下各分類,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>

</body>

</html>

左側定寬右側自適應:

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

#b{background:#f00;}

當需要左側定寬而右側自動時,則只需要設定a對象爲左浮動即可,b對象默認是占整個屏幕的寬度的,但因爲a爲左浮動並且占了200PX的寬度,b則自動位于a後面。

當然這樣會有一個問題,那就是當左側的內容高度超過右側時,右側的高度並不能隨之而增高,而當右側內容高于左側時,右側的內容就會流到左側內容的底下去。

解決這個問題的一個辦法是,給b也設置一個浮動,當然並不是設置右浮動,如果是設置的右浮動,當右側內容少不夠一行的寬度時左右兩側中間則會出現空白:

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

#b{background:#f00; float:right;}

給b設置左浮動時,則可以解決中間出現空白的問題,但同樣的道理,當b對象內容少不夠一行的寬度時時,右側就會出現空白:

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

#b{background:#f00; float:left;}

當然有另外一種兩全的解決辦法,即設置b對象距離左邊的位置,這樣即可以達到浮動的目的也可以解決b對象內容過多而流入到a對象下面的問題:

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

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

右側定寬左側自適應:

與左側定寬右側自動一樣的道理,右側定寬左側自動同樣可以實現:

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

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

如果按照上面的代碼,那麽你會發現這個代碼並不能實現右浮動,b對象顯示在a對象的下面,並沒有如預期的那樣顯示成右側定寬左而自動的效果。因爲HTML結構的原因,浮動DIV應該出現在沒有浮動的DIV前面,也就是說,如果是按上面的代碼,那麽<div id=」a」>…</dia>與<div id=」b」>…</dia>的順序應該調換一下:

<div id=」b」>開始我是在右邊,後面就可能跑到左邊去</div>

<div id=」a」>開始我是在左邊,後面可能到右邊</div>

當然,也可以在不改動HTML結構的情況下,利用CSS樣式去調整浮動順序,這也是CSS的優點之一,即可以在不改動原HTML結構的情況下,完成對頁面的修改:

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

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

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

CSS浮動一直是個比較讓人郁悶的問題,很多的布局問題都出在浮動上,特別是當浮動的列數很多時,但其實只要理解了兩列結構的浮動,面對多列數的浮動也不會再心慌,因爲兩列結構的左右浮動是最基本的浮動,也是更多浮動的基礎,三列、四列等的浮動都是出于此的。 來看一下幾種常見的CSS兩列浮動,CSS代碼見以下各分類,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> </body> </html> 左側定寬右側自適應: #a{float:left; width:200px; background:#aaa;} #b{background:#f00;} 當需要左側定寬而右側自動時,則只需要設定a對象爲左浮動即可,b對象默認是占整個屏幕的寬度的,但因爲a爲左浮動並且占了200PX的寬度,b則自動位于a後面。 當然這樣會有一個問題,那就是當左側的內容高度超過右側時,右側的高度並不能隨之而增高,而當右側內容高于左側時,右側的內容就會流到左側內容的底下去。 解決這個問題的一個辦法是,給b也設置一個浮動,當然並不是設置右浮動,如果是設置的右浮動,當右側內容少不夠一行的寬度時左右兩側中間則會出現空白: #a{float:left; width:200px; background:#aaa;} #b{background:#f00; float:right;} 給b設置左浮動時,則可以解決中間出現空白的問題,但同樣的道理,當b對象內容少不夠一行的寬度時時,右側就會出現空白: #a{float:left; width:200px; background:#aaa;} #b{background:#f00; float:left;} 當然有另外一種兩全的解決辦法,即設置b對象距離左邊的位置,這樣即可以達到浮動的目的也可以解決b對象內容過多而流入到a對象下面的問題: #a{float:left; width:200px; background:#aaa;} #b{background:#f00; margin-left:200px;} 右側定寬左側自適應: 與左側定寬右側自動一樣的道理,右側定寬左側自動同樣可以實現: #a{background:#f00; margin-left:200px;} #b{float:right; width:200px; background:#aaa;} 如果按照上面的代碼,那麽你會發現這個代碼並不能實現右浮動,b對象顯示在a對象的下面,並沒有如預期的那樣顯示成右側定寬左而自動的效果。因爲HTML結構的原因,浮動DIV應該出現在沒有浮動的DIV前面,也就是說,如果是按上面的代碼,那麽<div id=」a」>…</dia>與<div id=」b」>…</dia>的順序應該調換一下: <div id=」b」>開始我是在右邊,後面就可能跑到左邊去</div> <div id=」a」>開始我是在左邊,後面可能到右邊</div> 當然,也可以在不改動HTML結構的情況下,利用CSS樣式去調整浮動順序,這也是CSS的優點之一,即可以在不改動原HTML結構的情況下,完成對頁面的修改: #a{float:left; width:200px; background:#aaa;} #b{background:#f00; margin-left:200px;} 出處:[url=http://www.prower.cn/technic/195]http://www.prower.cn/technic/195[/url]
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有