2欄式網頁是最常見的排版之一,常用的方式有float和inline-block這種方式,這一篇介紹float的3種不同設定方法。
這個範例分三組來介紹,下面是基本會用到的html和css,可以複製以下的語法來練習。
html部份:
<div class="outside"> <div id="left1">#left1<br/> width:要設定;<br/> float:left;<br/> margin-right:10px; </div> <div id="right1"> #right1<br/> float:left; </div> </div> <div class="outside"> <div id="left2">#left2<br/> width:要設定;<br/> float:left; </div> <div id="right2">#right<br/> width:要設定;<br/> float:right;</div> </div> <div class="outside"> <div id="left3">#ldft3<br/> width:要設定;<br/> float:left;</div> <div id="right3">#right3<br/> width:auto;<br/> margin-left:(#left3的寬 + margin) </div> </div>
css部份:
.outside { background-color: #FF0; width: 510px; overflow: auto; margin: 5px; padding: 10px; } #left1{ height: 100px; width: 200px; background-color: #69F; float: left; margin-right: 10px; } #right1{ height: 100px; width: 300px; background-color: #6C6; float: left; } #left2{ height: 100px; width: 200px; background-color: #69F; float: left; } #right2{ height: 100px; width: 300px; background-color: #6C6; float: right; } #left3{ height: 100px; width: 200px; background-color: #69F; float: left; } #right3{ height: 100px; background-color: #6C6; width: auto; margin-left: 210px; }
第1組:左右區塊都設定float:left;
設定了float:left;屬性的區塊會從左至右排列,所以用這樣的方法,所以一定要為每個區塊都設定好所要的寬度(width),float物件如果沒有設定寬度的話,預設會依照區塊的內容決定寬度,如下圖:
而設定了寬度也要計算一下區塊間距跟區塊與外框的間距,以這一個範例來說:
外框寬度是width: 510px;,而左右區塊的間距10px要再減掉,這樣一來左右區塊可以用的寬度就要限制在500px了,如果設定得數值不剛好的話,就會發生像下圖的情況
另外因為左右兩個區塊都是設定float:left;,所以在左區塊需要再增加margin-right: 10px;的屬性讓兩區塊中間有間距,否則會是相連的區塊
附上完成的CSS
.outside { background-color: #FF0; width: 510px; overflow: auto; margin: 20px 0; padding: 10px; } #left1{ height: 100px; width: 200px; background-color: #69F; float: left; margin-right: 10px; } #right1{ height: 100px; width: 300px; background-color: #6C6; float: left; }
第2組:左區塊設定float:left;,右區塊設定float:right;
float:left;屬性是由左往右排列,而float:right;是由右往左
所以這樣設定的兩個區塊自然會分散在左右兩邊,所以只要設定好應當的寬度就可以了
而且因為兩個區塊本來就分散在左右,所以就不用特別再設定margin來產生間距了
當然如果寬度設定得不剛好的話,也是會出現像下圖的情況
附上完成的CSS
.outside { background-color: #FF0; width: 510px; overflow: auto; margin: 20px 0; padding: 10px; } #left2{ height: 100px; width: 200px; background-color: #69F; float: left; } #right2{ height: 100px; width: 300px; background-color: #6C6; float: right; }
第3組:左區塊設定float:left;,右區塊設定margin-left
這一組的設定方式其實是利用了float浮動在底圖層上的屬性,如果只設定了左區塊float:left;,會先得下圖的樣子
我們把左區塊改成只有外框的情況可以看到,其實左區塊是浮在上層,而沒設定寬值的右區塊現在是跟外框一樣寬的狀態,也就是有一部份是被左區塊遮住的
我們可以利用margin-left把右區塊往右推讓寬度變小,這時候右區塊的內容就可以完整地顯示出來了,就像是下圖模擬的剖面
也就是在右區塊加上margin-left:(左區塊寬 + 間距);的屬性就可以了
當然因為左區塊的寬度會影響右區塊的margin-left要設定多寬,所以這部份的數值也要計算好才行
附上完成的CSS
.outside { background-color: #FF0; width: 510px; overflow: auto; margin: 20px 0; padding: 10px; } #left{ height: 90px; width: 200px; background-color: #69F; float: left; } #right{ height: 100px; background-color: #6C6; width: auto; margin-left: 210px; }
改變外框寬度
上面介紹的3種方式最大的不同就是當外框寬度被改變時所得到的結果
如上圖結果所示,第1、2種方式都需要再調整右區塊的寬度,而左區塊則不需要,所以在不確定外框寬度時採用第3種方式是比較輕鬆的方式。