Welcome! 登入 註冊
美寶首頁 美寶百科 美寶論壇 美寶落格 美寶地圖

Advanced

[CSS] FLOAT:浮動屬性的排版

[CSS] FLOAT:浮動屬性的排版

一、《FLOAT:浮動》觀念說明



網頁設計中,DIV的特性會自成一行,也就是說若沒有做特別設定,每個DIV會自動換行到下一列,若想要讓不同的DIV排列整齊並且橫向排列時,則FLOAT會是一個很好的選擇。

我們可以使用FLOAT來設定靠左或靠右的屬性,使DIV能有更多不同彈性的排版選擇。


二、《FLOAT:浮動》使用說明



1.兩欄以上的網頁編排設定

想要完成左右兩欄的網頁版面,光設定寬高並沒有作用,因為 Div 標籤的特性是會「自成一排」, 不管寬度是大是小,排列方式永遠是由上往下依序排列。若想要讓 Div 標籤可以左右並排,則必須仰賴「float」屬性的幫忙。

基本語法:
.box { float: left; width: 315px; margin-right: 20px; }
特別注意:用浮動屬性排版,基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度,DIV區塊會預設會佔有100%的寬度,這樣接下來的DIV區塊就會「換行」,也就失去了「浮動排版」的意義。

另外,一般在使用 float 時,也會加上右或左的「邊距 margin」設定。這是為了讓平行區塊間有所間隔,以保持版面的協調。

2.繞圖排文的設定

例如將某圖片設定為 float:left (向左浮動),則圖片下方的文字或元素都會向上靠齊到圖片右側的空白處,就完成文繞圖的設定了。

三、《FLOAT:浮動》實例解說



http://i1136.photobucket.com/albums/n481/parkparkyang/float-1.jpg


區塊DIV build的寫法:

1.FLOAT浮動設定:DIV的樣式:CLASS命名為build,將DIV的浮動屬性設定靠左,寫成 float: left;
2.MARGIN邊界設定:DIV與DIV之間的邊距為21px,margin-right: 21px;

圖示:

http://i1136.photobucket.com/albums/n481/parkparkyang/al-1.jpg


CSS語法如下:

.build { float: left; margin-right: 21px; width: 315px; }
待續...



Edited 7 time(s). Last edit at 11/01/2011 06:55PM by HP.
(編輯記錄)