這篇將介紹如何設(shè)置每個(gè)位置 DIV 的寬度和布局排版，并且也會(huì)展示如何讓主題顯示正確，并同時(shí)在 Firefox 和 IE 下兼容，顯示一致。
在我們開(kāi)始之前，打開(kāi) Xampp Control，主題文件夾，Firefox 瀏覽器，IE 瀏覽器，index.php和style.css這兩個(gè)文件。
第1步：設(shè)置頁(yè)面總體寬度
現(xiàn)在我們首先要確定的是主題的總體寬度。我們使用 750px；主題的大小取決于博客絕大多數(shù)訪問(wèn)者的屏幕分辨率。需要避免的是使用過(guò)大寬度的 的主題，如果博客的讀者都大多數(shù)使用 800px × 600px 屏幕，這樣的話，如果是使用 900px 款的主題將會(huì)有 100多個(gè)像素超出他們的屏幕，顯然這是對(duì)用戶很不友好的。
不管怎樣，我們?cè)趺礃影阎黝}的總體寬度設(shè)置為 750px 呢？
我們需要把現(xiàn)在主題中的所有的東西（header，container，sidebar 和 footer）放入一個(gè) 750px 的 DIV 標(biāo)簽中。
在 <body> 之后增加：<div id=”wrapper”>
在 </body> 之前增加：</div>
在 style.css 文件中輸入以下代碼：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
在 CSS，# 號(hào)是通過(guò) id 來(lái)定位頁(yè)面中的元素，而點(diǎn)號(hào)是通過(guò) class 來(lái)定位頁(yè)面中的元素，如果你的代碼是 <div class=”wrapper”>，那么就應(yīng)該用 .wrapper 來(lái)替代#wrapper 去定位 wrapper 這個(gè) DIV 標(biāo)簽。
同時(shí)保存 index.php 和 style.css 文件。刷新 Firefox 和 IE 瀏覽器（按 F5）查看所做的改動(dòng)。
詳細(xì)解釋：
- margin: 0 auto 0 auto; 意思是（注意順序）：0上頁(yè)邊空白，自動(dòng)右頁(yè)面空白，0下頁(yè)邊空白和自動(dòng)左頁(yè)面空白。從現(xiàn)在開(kāi)始，記得設(shè)置左右頁(yè)邊空白為自動(dòng)將使得居中對(duì)齊。
- width: 750px; 顯而易見(jiàn)是 750 像素。
- text-align: left; 是讓 wrapper DIV 我們的文本向左對(duì)齊因?yàn)槲覀兊认乱獙?body{ text-align: left;} 改成 text-align: center;
第2步：自動(dòng)頁(yè)面居中
把 body{} 中的 text-align: left; 改成 text-align: center;。
為什么？（我假設(shè)你使用的是 Firefox 和 Internet Explorer 6）。你的布局可能看起來(lái)是正確的，但對(duì)于使用早前版本的 IE 用戶可能不正確。還記得設(shè)置左邊和右邊的頁(yè)邊空白為自動(dòng)數(shù)居中嗎？但是這并不是對(duì)所有的 IE 都適用，所以 body{ text-align: center; } 是讓 wrapper DIV 居中在舊版本 IE 的一種解決方案。
（隨便說(shuō)一下，再說(shuō) Firefox 和 IE 中文本大小是不同的，我們稍后解決。）
第3步：設(shè)置 header 寬度和布局
讓 Header 浮到左邊并且設(shè)置它的寬度為 750px：
#header{
float: left;
width: 750px;
}
第4步：設(shè)置 Container 寬度和布局
讓 Container 浮到左邊并且寬度為 500px：
#container{
float: left;
width: 500px;
}
第5步：設(shè)置 Sidebar 寬度和布局
讓 Sidebar 浮到左邊，寬度為240px，并且給它灰色的背景：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
#ffffff 是白色而background: #eeeeee; 是非常淺的灰色。我們給側(cè)邊欄增加一個(gè)背景顏色只是去查看當(dāng)增加剩下的 10 像素之后的不同之處。
第6步：設(shè)置 Footer 的寬度和布局
讓 Footer 浮到左邊，左右兩邊都沒(méi)有東西，并且寬度為：750px：
#footer{
clear: both;
float: left;
width: 750px;
}
Header 和 Footer 的樣式有什么區(qū)別呢？答案是 footer{} 中有 clear: both;。它在那兒使得 Footer 不能和它上面的東西（如 Sidebar 或者 Container）連接起來(lái)。
保存并刷新瀏覽器。
第7步：給側(cè)邊欄增加其余的 10 像素
給側(cè)邊欄增加其余的 10 像素的頁(yè)邊空白?，F(xiàn)在側(cè)邊欄的 CSS 應(yīng)該是：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}
保存并刷新瀏覽器去查看 10 像素的空白增加到側(cè)邊欄的左邊了。
margin: 0 0 0 10px; 具體的意思是：上邊空白為0，右邊空白為0，底部空白為0，左邊空白為10像素。當(dāng)大小為0的時(shí)候，px 單位不是必需的。
第8步（額外的步驟）：修正 IE 的雙倍頁(yè)邊距 bug
Internet Explorer 有個(gè)雙倍頁(yè)邊距的 bug，這樣在 IE 下，我們的頁(yè)面距就是 20像素，20像素的頁(yè)邊距可能會(huì)破壞布局并把側(cè)邊欄擠到頁(yè)面的底部，因?yàn)橐粋€(gè)20像素的頁(yè)邊距使得 Container 和 Sidebar 的寬度之和為 760px 而不是 750px。為了解決這個(gè)問(wèn)題，增加 display: inline; 到側(cè)邊欄?，F(xiàn)在你的側(cè)邊欄應(yīng)該是：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
這里是現(xiàn)在的 index 和 style 文件的內(nèi)容。
未經(jīng)允許不得轉(zhuǎn)載：445IT之家 » WordPress主題開(kāi)發(fā)教程二十：寬度和布局
