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

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


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

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

bug2.
float 之後會造成外層的 #links 內容都浮動出來
若是 #links 有設定背景色就會發現這個問題
請見前文: 筆記 / float 的 bug


-- 以下利用 pixnet 痞客模板的側欄位 #links 做範例 css --

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

效果圖示:



--
後記:
說是自己的筆記有點牽強,因為常常用其實不會忘記的...
但是以教學的角度去切入的話,好像又很假會,所以就筆記吧!!
css 相關文章都整理在 css note 的分類裡面了
position 的筆記更新代補...

有問題在迴響提出吧!! :)
, ,

Leah 發表在 痞客邦 PIXNET 留言(7) 人氣()


留言列表 (7)

發表留言
  • gries
  • 什麼假會-ˇ-明明就很會阿
    CSS還是好難噢=_=
    我還是乖乖套用別人做的好了(滾
  • 我沒有很會啦~ 好說好說~
    CSS 不會很難啦~ 真的!!

    Leah 於 2008/02/16 23:34 回覆

  • ayu91035
  • 原來是這樣
    之前margin兩倍的原因是因為float喔
    現在終於知道解決辦法了
  • 嗯嗯!! 是因為 float 喔!!

    Leah 於 2008/02/16 23:36 回覆

  • octoberhsu
  • 那請問如果我想要比如說:
    LINK 全部都擺在BLOG下面阿。(直條)

    可是我有很多個欄位,我能讓他自己去跑位置嗎,像是我LINK整體寬高都設定了,然後第一行的2個BOX已經佔滿LINK整體高度,那第三個是否能自動到第二行去?

    因為我發現我怎麼試阿,有時候瀏覽器還是有差,像您之前寫過的固定欄位阿,有時候FF和IE都有差...(搞得我好煩,現在我買書來自學喇)
  • 我不太懂你的意思~
    如果要讓它自動排列就用我說的 float: left; 就可以了
    至於你說的第一個欄位高度就已經超過的問題~
    你可以選擇 overflow: auto; 和固定高度把捲軸弄出來~
    固定欄位基本上你只要基準點設定對的話~
    ie 和 ff 都會正常顯示
    所謂的基準點就是要在外包的 div + position
    他的基準才會以被設定過的 div 左上角為基準點

    Leah 於 2008/02/18 10:20 回覆

  • valerie
  • float在痞客模版上其實可以做非常多的運用耶!
    就如同前幾天給你看的那個"阿巧因為很懶一直拖延的樣式"一樣XD
    哇哈哈哈哈(逃)
  • 看到這篇好久以前的回應~
    阿你的樣式勒!!! 騙肖欸

    Leah 於 2008/07/22 02:33 回覆

  • misapupu
  • 我用margin把碎碎念跟人氣移了位置
    可是換到IE卻看不到@@(火狐很正常...
    請問leah這問題要怎麼解決>"<
  • 什麼意思? 囧

    Leah 於 2008/07/22 02:33 回覆

  • patty30925
  • 請問要怎麼讓用FF看時也可以是三個一排(#links的box)
    我用opera是正常的三個一排 所以有兩排,
    而FF看的話就是一個一排 ..
  • 方法一樣阿~
    就是寬度的計算正確就可以了~

    Leah 於 2009/03/02 20:51 回覆

  • g13824
  • 謝謝妳 我會使用圓角框了