如果習慣以前用表格在設計網頁排版,現在改用 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 設計。