當一個大框架中有許多小物件 (box1、box2、box3、box4)
想要排列整齊並且橫向排列時,現在許多人會選擇用 position 的方式
但每個 box 都要分別去設定絕對位置是很麻煩的事情~
這時候用 float 是不錯的選擇~

先前很流行的直條式版型,大多數人都將 #links 放在文章底下~
但由於 #links 內的物件比較適合小區塊排列~
放在文章區塊下的話使每個 box 的寬度都很寬
每個 box 右邊都多出了很多空白看起來不漂亮又不順眼
如下圖所示:


這時候其實可以使用 float 屬性使 box 都整齊排列
將 box 固定寬高之後,便可以方便的排列整齊 box
但需要注意的是:
若是高度沒有固定,float 的呈現就會不整齊呈現高低不整的樣子

bug1.
且 float 後,IE6 對 margin 的定義會錯誤
假設 float: left;
ie 解讀 margin-left 時會以兩倍的距離去計算
解除這個 bug 的方式就是 float 與 display: inline; 同時使用

bug2.
float 之後會造成 #links (父元素)的內容(子元素float之後)都浮動出來
若是 #links 有設定背景色就會發現這個問題


所以,整體寫法如下則可避免:

--
/* css 範例開始 */
#links {
 width: 400px;
 _height: 1%;
 overflow: hidden;
 _overflow: none;
 background: #ccc;
 padding: 0px 0px 10px 0px; /*padding屬性順序-上右下左*/
}
.box {
 float: left;
 _display: inline; /*解 IE6 margin bug*/
 width: 185px;
 height: 110px;
 overflow: hidden; /*避免內容超出寬高而寫入*/
 margin: 10px 0px 0px 10px; /*margin屬性順序-上右下左*/
}
--

效果圖示:



其中
 _height: 1%;
 overflow: hidden;
 _overflow: none;

此三行為解除 bug2. 所說明的浮動後內容空置問題




以上為使用痞客模板為範例說明
float 的 bug2. 另外一個解法則是

若 float 的區塊之下還有其他區塊是不需要 float (同層級)
則在下方區塊設定 clear: both; 即可

前提是下方區塊須有獨立的 class 或 id




希望大家都可以試著運用看看 :)

themes 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 悄悄話
  • 4度C
  • 自己改float好像還是有點難,
    請問現有版型中有如下這種,
    側欄可以在最下面變成兩排,文章部份可以滿版的?
    http://www.wretch.cc/blog/aria
    目前沒有找到痞客邦有類似的,
    或是未來有可能推出嗎?
    請版主解答一下,謝謝!