CSS DIV 並排語法

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

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

CSS DIV 區塊並排範例語法
<style type="text/css">
#DIV1{
width:200px;　//DIV區塊寬度
line-height:50px;　//DIV區塊高度
padding:20px;　//DIV區塊內距，參閱：CSS padding 內距。
border:2px blue solid;　//DIV區塊邊框，參閱：CSS border 邊框設計。
margin-right:10px;　//靠右外距，參閱：CSS margin 邊界使用介紹範例教學。
float:left;
}
#DIV2{
width:200px;
line-height:50px;
padding:20px;
border:2px green solid;
float:left;
}
</style>
<div id="DIV1">這是並排在左邊的 DIV 區塊</div>
<div id="DIV2">這是並排在右邊的 DIV 區塊</div>
<div style="clear:both;"></div><!--這是用來清除上方的浮動效果-->
範例的並排效果
這是並排在左邊的 DIV 區塊
這是並排在右邊的 DIV 區塊
我們在範例中準備了兩個大小一樣，邊框顏色不同的 DIV 區塊，我們要讓這兩個 DIV 區塊並排呈現，做法很簡單，就是把前段敘述的 float 屬性套用到這兩個區塊上，而且都是設定為向左浮動（float:left;），當兩個區塊都知道要向左浮動之後，原本會排列在藍色外框區塊下的綠色外框區塊就自動浮動到藍色框區塊的右側，形成兩個區塊並排的效果，這也是 CSS float 浮動屬性的基本功能。

延伸閱讀
© Copyright webtech.tw Since 2010