網頁兩個 DIV 區塊的浮動設計,用 css float 處理

如果習慣以前用表格在設計網頁排版,現在改用 css 開始設計,剛開始確實是會有一點點的不習慣,尤其是在用 DIV 排版的時候,許多人會碰到的問題就是兩個 DIV 區塊要怎樣才能並排在一起,其實這在 CSS 的設計方式算是相當常見的一種設計手法,也有很標準的做法,這篇就來稍微講解一下。

如果是用到所謂的 DIV 區塊排版方式,無論是幾個 DIV 都一樣,必須使用到 css 的浮動技巧,也就是 css float,這個功能可以讓每個不同的 DIV 順利並排在一起,當然也要考量存放 DIV 的空間是否足夠以及 DIV 本身的寬度設定。

假設我們有兩個區塊,預設會像這樣向下排列。

[區塊1]
[區塊2]

如果想要並排在一起,使用用 css float 浮動技巧後可以像這樣排列。

[區塊1][區塊2]

這樣應該有概念了吧!詳細的參考語法可以看這篇網路教學的介紹。

CSS float 浮動:http://www.webtech.tw/info.php?tid=79

浮動的概念可能有一點點抽象,剛開始接觸 css 的設計師可能要花點時間了解,但是絕對是值得的,因為不會浮動技巧,幾乎等於不會 css 設計。