首頁 > web前端 > css教學 > CSS佈局之浮動(一)

CSS佈局之浮動(一)

黄舟
發布: 2016-12-17 11:48:43
原創
1264 人瀏覽過

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

來看一下幾種常見的CSS兩列浮動,CSS代碼見以下各分類,HTML結構代碼如下:

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>



CSS浮動


開始我是在左邊,後面可能到右邊

開始我是在右邊,後面就可能跑到左邊去



左側定寬右側自適應:

#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前面,也就是說,如果是照上面的程式碼,那麼

…與
…的順序應該調換一下:

開始我是在右邊,後面就可能跑到左邊去

開始我是在左邊,後面可能到右邊

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

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

 以上就是CSS佈局之浮動的內容,更多相關文章請關注PHP中文網(www.php.cn)! 


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板