RWD網頁切版(五){CSS float屬性:2欄排版3種設定方式}

2欄式網頁是最常見的排版之一,常用的方式有float和inline-block這種方式,這一篇介紹float的3種不同設定方法。
001

這個範例分三組來介紹,下面是基本會用到的html和css,可以複製以下的語法來練習。

html部份:

css部份:

第1組:左右區塊都設定float:left;

002

設定了float:left;屬性的區塊會從左至右排列,所以用這樣的方法,所以一定要為每個區塊都設定好所要的寬度(width),float物件如果沒有設定寬度的話,預設會依照區塊的內容決定寬度,如下圖:

006

而設定了寬度也要計算一下區塊間距跟區塊與外框的間距,以這一個範例來說:

外框寬度是width: 510px;,而左右區塊的間距10px要再減掉,這樣一來左右區塊可以用的寬度就要限制在500px了,如果設定得數值不剛好的話,就會發生像下圖的情況

003 004 005

另外因為左右兩個區塊都是設定float:left;,所以在左區塊需要再增加margin-right: 10px;的屬性讓兩區塊中間有間距,否則會是相連的區塊

007

附上完成的CSS

第2組:左區塊設定float:left;,右區塊設定float:right;

008

float:left;屬性是由左往右排列,而float:right;是由右往左

所以這樣設定的兩個區塊自然會分散在左右兩邊,所以只要設定好應當的寬度就可以了

而且因為兩個區塊本來就分散在左右,所以就不用特別再設定margin來產生間距了

當然如果寬度設定得不剛好的話,也是會出現像下圖的情況

009 010

附上完成的CSS

第3組:左區塊設定float:left;,右區塊設定margin-left

011

這一組的設定方式其實是利用了float浮動在底圖層上的屬性,如果只設定了左區塊float:left;,會先得下圖的樣子

012

我們把左區塊改成只有外框的情況可以看到,其實左區塊是浮在上層,而沒設定寬值的右區塊現在是跟外框一樣寬的狀態,也就是有一部份是被左區塊遮住的

014

我們可以利用margin-left把右區塊往右推讓寬度變小,這時候右區塊的內容就可以完整地顯示出來了,就像是下圖模擬的剖面

015

也就是在右區塊加上margin-left:(左區塊寬 + 間距);的屬性就可以了

011

當然因為左區塊的寬度會影響右區塊的margin-left要設定多寬,所以這部份的數值也要計算好才行

013

附上完成的CSS

改變外框寬度

上面介紹的3種方式最大的不同就是當外框寬度被改變時所得到的結果

016

如上圖結果所示,第1、2種方式都需要再調整右區塊的寬度,而左區塊則不需要,所以在不確定外框寬度時採用第3種方式是比較輕鬆的方式。

Leave a Reply