CSS布局之浮動(一)

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布局之浮動(一)
 
CSS制作網頁經驗:清除網頁浮動-css設計
在進行浮動布局時,大多數人都深知,在必要的地方進行浮動清理:...查看完整版>>CSS制作網頁經驗:清除網頁浮動-css設計
 
網頁設計 CSS布局調試的有效方法-css設計
  網頁設計中CSS布局是很重要的部分,下面介紹幾種檢查調試CSS布局的有效方法。  1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記  即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一...查看完整版>>網頁設計 CSS布局調試的有效方法-css設計
 
CSS高級教程 頁面布局
用CSS 來布局很容易。如果你已經習慣用表格布局的話,起先會感覺比較困難。其實不難,只不過動機不同,並且在實踐中更有意義。你可以把這一頁面的各個部分當作獨立的版塊來看待,無論你選擇哪一塊。你可以絕對或相對...查看完整版>>CSS高級教程 頁面布局
 
CSS布局常用的方法
float:none|left|right 取值:none:默認值。對象不飄浮left:文本流向對象的右邊right:文本流向對象的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml代碼: Example Source Code [www.devdao.com]<div id="w...查看完整版>>CSS布局常用的方法
 
CSS布局自適應高度解決方法
  原作者:Alex Robinson  原文標題:Equal Height Columns  這是一個比較典型的三行二列布局,每列高度(事先並不能確定哪列的高度)的相同,是每個設計師追求的目標,按一般的做法,大多采用背景圖填充、加JS腳...查看完整版>>CSS布局自適應高度解決方法
 
CSS:超越網格的布局
原文作者:原文出自:中文翻譯: (2006-06-01) “Aerials, in the sky, when you lose small mind you free your life” - 十一月的一個深夜,從空中俯瞰我的家鄉,亞利桑那州的圖森市,它那嚴謹的網格布局給我留下了...查看完整版>>CSS:超越網格的布局
 
樣式表CSS布局經驗
  隨著時間的積累這裏的內容會有增加或者修改,希望下面的東西對後來的標准學習者會有些幫助,或者毫無用處.  主要的內容是在IE和MOZILLA之間的差異和容易忽視的細節,一些經典應用的最佳實現方法,應該避免違犯的錯...查看完整版>>樣式表CSS布局經驗
 
CSS布局自適應高度解決方法
原作者:Alex Robinson原文標題:Equal Height Columns這是一個比較典型的三行二列布局,每列高度(事先並不能確定哪列的高度)的相同,是每個設計師追求的目標,按一般的做法,大多采用背景圖填充、加JS腳本的方法使列...查看完整版>>CSS布局自適應高度解決方法
 
 
回到王朝網路首頁