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

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

這個範例分三組來介紹,下面是基本會用到的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;

002
設定了float:left;屬性的區塊會從左至右排列,所以用這樣的方法,所以一定要為每個區塊都設定好所要的寬度(width),float物件如果沒有設定寬度的話,預設會依照區塊的內容決定寬度,如下圖:
006
而設定了寬度也要計算一下區塊間距跟區塊與外框的間距,以這一個範例來說:
外框寬度是width: 510px;,而左右區塊的間距10px要再減掉,這樣一來左右區塊可以用的寬度就要限制在500px了,如果設定得數值不剛好的話,就會發生像下圖的情況
003 004 005
另外因為左右兩個區塊都是設定float:left;,所以在左區塊需要再增加margin-right: 10px;的屬性讓兩區塊中間有間距,否則會是相連的區塊
007
附上完成的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;

008
float:left;屬性是由左往右排列,而float:right;是由右往左
所以這樣設定的兩個區塊自然會分散在左右兩邊,所以只要設定好應當的寬度就可以了
而且因為兩個區塊本來就分散在左右,所以就不用特別再設定margin來產生間距了
當然如果寬度設定得不剛好的話,也是會出現像下圖的情況
009 010
附上完成的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

011
這一組的設定方式其實是利用了float浮動在底圖層上的屬性,如果只設定了左區塊float:left;,會先得下圖的樣子
012
我們把左區塊改成只有外框的情況可以看到,其實左區塊是浮在上層,而沒設定寬值的右區塊現在是跟外框一樣寬的狀態,也就是有一部份是被左區塊遮住的
014
我們可以利用margin-left把右區塊往右推讓寬度變小,這時候右區塊的內容就可以完整地顯示出來了,就像是下圖模擬的剖面
015
也就是在右區塊加上margin-left:(左區塊寬 + 間距);的屬性就可以了
011
當然因為左區塊的寬度會影響右區塊的margin-left要設定多寬,所以這部份的數值也要計算好才行
013
附上完成的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種方式最大的不同就是當外框寬度被改變時所得到的結果
016
如上圖結果所示,第1、2種方式都需要再調整右區塊的寬度,而左區塊則不需要,所以在不確定外框寬度時採用第3種方式是比較輕鬆的方式。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *