Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

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

討論區清單 文章列表
Changed By: HP
Change Date: November 01, 2011 06:55PM

[CSS] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

<b>[color=#663300]1.兩欄以上的網頁編排設定[/color]</b>

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

<b>基本語法：</b>
<xmp>.box {
float: left;
width: 315px;
margin-right: 20px;
}
</xmp>

<b>特別注意：用浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...
Changed By: HP
Change Date: November 01, 2011 06:19PM

[CSS] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

<b>[color=#663300]1.兩欄以上的網頁編排設定[/color]</b>

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

或左的「邊距 margin」設定。這是為了讓平行區塊間有所間隔，以保持版面呈現的平衡與比例。
浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>
.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...
Changed By: HP
Change Date: November 01, 2011 06:05PM

[講義[CSS] FLOAT：浮動屬性的排版

[color=#990000]一、《FLOAT：浮動》觀念說明[/color]



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

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


[color=#990000]二、《FLOAT：浮動》使用說明[/color]



[color=#663300]1.兩欄以上的網頁編排設定[/color]

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

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

[color=#663300]2.繞圖排文的設定[/color]

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

[color=#990000]三、《FLOAT：浮動》實例解說[/color]



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


區塊DIV build的寫法：

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

圖示：

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


CSS語法如下：

<br /> .build {<br /> float: left;<br /> margin-right: 21px;<br /> width: 315px;<br /> }<br />

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

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

[color=#663300]2.繞圖排文的設定[/color]

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

[color=#990000]三、《FLOAT：浮動》實例解說[/color]



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


區塊DIV build的寫法：

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

圖示：

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


CSS語法如下：

.build {<br /> float: left;<br /> margin-right: 21px;<br /> width: 315px;<br /> }<br />

待續...
Changed By: JinJin
Change Date: October 14, 2011 01:54PM

[講義] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

<b>[color=#663300]1.兩欄以上的網頁編排設定[/color]</b>

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>
.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...
Changed By: JinJin
Change Date: October 07, 2011 03:16PM

[講義] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

<b>[color=#663300]1.兩欄以上的網頁編排設定[/color]</b>

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>
.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...
Changed By: JinJin
Change Date: October 07, 2011 01:40PM

[講義] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

<b>[color=#663300]1.兩欄以上的網頁編排設定[/color]</b>

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

另外，一般在使用 float 時，也會加上右或左的「邊距 margin」
待續....設定。這是為了讓平行區塊間有所間隔，以保持版面呈現的平衡與比例。

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>
.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...
Changed By: JinJin
Change Date: October 07, 2011 09:09AM

[講義] FLOAT：浮動屬性的排版
<h1>[color=#990000]一、《FLOAT：浮動》觀念說明[/color]</h1>

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

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


<h1>[color=#990000]二、《FLOAT：浮動》使用說明[/color]</h1>

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


<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>


待的網頁編排設定[/color]</b>

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。</b>這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

另外，一般在使用 float 時，也會加上右或左的「邊距 margin」
待續....設定。這是為了讓平行區塊間有所間隔，以保持版面呈現的平衡與比例。

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>
.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

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

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

<b>[color=#663300]2.繞圖排文的設定[/color]</b>

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

<h1>[color=#990000]三、《FLOAT：浮動》實例解說[/color]</h1>

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


<b>區塊DIV build的寫法：</b>

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

圖示：

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


CSS語法如下：

<xmp>.build {
float: left;
margin-right: 21px;
width: 315px;
}
</xmp>

待續...

Original Message

作者: JinJin
Date: October 07, 2011 09:07AM

[講義] FLOAT：浮動屬性的排版

[color=#990000]一、《FLOAT：浮動》觀念說明[/color]



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

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


[color=#990000]二、《FLOAT：浮動》使用說明[/color]



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


[color=#663300]2.繞圖排文的設定[/color]

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

[color=#990000]三、《FLOAT：浮動》實例解說[/color]




待的網頁編排設定[/color]

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

浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

另外，一般在使用 float 時，也會加上右或左的「邊距 margin」
待續....設定。這是為了讓平行區塊間有所間隔，以保持版面呈現的平衡與比例。

[color=#663300]2.繞圖排文的設定[/color]

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

[color=#990000]三、《FLOAT：浮動》實例解說[/color]



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


區塊DIV build的寫法：

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

圖示：

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


CSS語法如下：

<br /> .build {<br /> float: left;<br /> margin-right: 21px;<br /> width: 315px;<br /> }<br />

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

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

[color=#663300]2.繞圖排文的設定[/color]

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

[color=#990000]三、《FLOAT：浮動》實例解說[/color]



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


區塊DIV build的寫法：

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

圖示：

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


CSS語法如下：

.build {<br /> float: left;<br /> margin-right: 21px;<br /> width: 315px;<br /> }<br />

待續...