CSS DIV 並排語法 - WebTech 網頁設計教學站

CSS DIV 區塊並排必須要使用到區塊浮動的設計技巧，所謂的浮動，可以看成在平面上的兩個DIV 區塊，從預設的由上而下排列，改變為浮動成水平排列，就會是並排在一起， ... WEBTECH網頁設計教學站 首頁 PHP CSS HTML JavaScript GIMP Linux OpenOffice 瀏覽器 其它 Home › CSS › CSSDIV並排語法 CSSDIV並排語法 CSSDIV區塊並排必須要使用到區塊浮動的設計技巧，所謂的浮動，可以看成在平面上的兩個DIV區塊，從預設的由上而下排列，改變為浮動成水平排列，就會是並排在一起，在CSS中，浮動有一個特定的屬性叫做float，網頁設計師可以透過這個float來設定DIV區塊要靠左浮動還是要靠右浮動，我們會在範例中呈現給各位讀者朋友看，本文的重點DIV區塊並排的效果也是透過float屬性來設定，先來看看這個浮動屬性的語法，再來套用到範例。

CSSfloat屬性語法float:浮動方向;CSS的float可以讓網頁設計師自己決定浮動的DIV區塊要靠左還是靠右浮動，參數設定請參閱《CSSfloat浮動》篇的介紹。

CSSDIV區塊並排範例語法#DIV1{width:200px;　//DIV區塊寬度line-height:50px;　//DIV區塊高度padding:20px;　//DIV區塊內距，參閱：CSSpadding內距。

border:2pxbluesolid;　//DIV區塊邊框，參閱：CSSborder邊框設計。

margin-right:10px;　//靠右外距，參閱：CSSmargin邊界使用介紹範例教學。

float:left;}#DIV2{width:200px;line-height:50px;padding:20px;border:2pxgreensolid;float:left;}這是並排在左邊的DIV區塊這是並排在右邊的DIV區塊範例的並排效果這是並排在左邊的DIV區塊這是並排在右邊的DIV區塊我們在範例中準備了兩個大小一樣，邊框顏色不同的DIV區塊，我們要讓這兩個DIV區塊並排呈現，做法很簡單，就是把前段敘述的float屬性套用到這兩個區塊上，而且都是設定為向左浮動（float:left;），當兩個區塊都知道要向左浮動之後，原本會排列在藍色外框區塊下的綠色外框區塊就自動浮動到藍色框區塊的右側，形成兩個區塊並排的效果，這也是CSSfloat浮動屬性的基本功能。

延伸閱讀修改CSSDIV內文字樣式修改CSSDIV內文字顏色增加CSSDIV區塊背景圖片CSSDIV邊框顏色與邊框樣式設計CSSdisplay:inline-block可設定區塊寬度與高度 您可能會想看 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 CSSdisplay:inline-block可設定區塊寬度與高度 利用CSS設計ulli橫向水平顯示 CSSlist-style-type列表開頭顯示符號 CSSlist-style-image列表開頭顯示圖示 CSSlist-style-position列表位置 CSSlist-style列表設計 修改CSSDIV內文字字型 即時熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 今日熱門文章 如何替HTMLDIV區塊增加邊框效果 如何在HTMLDIV區塊內插入圖片 如何修改HTMLDIV區塊內的文字顏色 HTMLspan標籤用法 如何修改HTMLDIV區塊內的文字字型 如何替HTMLDIV增加背景顏色 HTMLDIV標籤用法 PHPstripslashes函數 PHPstrip_tags函數消除PHP或HTML標籤符號 PHPaddslashes函數替字符增加斜線 ©Copyrightwebtech.twSince2010