DIV 浮動技巧

這篇可以說是 float 的延伸,在 CSS 中 float 是用來宣告元素浮動用的,如果想了解可以參考此篇:CSS float 浮動元素。本篇不針對浮動元素的使用方式介紹,專注於 DIV 區塊的浮動技巧說明。

假設有兩個 DIV 區塊,希望透過浮動的技巧讓兩的 DIV 可以水平排列,如下圖這樣:



DIV 區塊浮動示意語法
#DIV_A {
 float:left;
}
#DIV_B {
 float:left;
}
假設左邊藍色區塊為 DIV_A,右邊綠色區塊為 DIV_B,想要讓這兩個區塊水平排列在一起,可以使用 float 浮動技巧,分別設定 float:left 讓元素各自靠左浮動,這樣就可以做 DIV 出水平排列的效果囉!你也可以搭配 position 來定位 DIV 區塊的位置。

延伸閱讀
CSS float 浮動元素
CSS DIV 區塊標籤的使用教學
CSS clear 用法介紹
CSS position 位置屬性(定位)
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C