wordpress 主题教程：宽度和布局 -云顶国际

#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

，那么就应该用 .wrapper 来替代 #wrapper 去定位 wrapper这个 div 标签。

同时保存 index.php 和 style.css 文件。刷新 firefox 和 ie 浏览器（按 f5）查看所做的改动。

详细解释：

• margin: 0 auto 0 auto; 意思是（注意顺序）：0上页边空白，自动右页面空白，0下页边空白和自动左页面空白。从现在开始，记得设置左右页边空白为自动将使得居中对齐。
• width: 750px; 显而易见是 750 像素。
• text-align: left; 是让 wrapper div 中的文本向左对齐因为我们等下要要将 body{ text-align: left;} 改成 text-align: center;

第2步：自动页面居中

把 body{} 中的 text-align: left; 改成 text-align: center;。

为什么？（我假设你使用的是 firefox 和 internet explorer 6）。你的布局可能你看起来是正确的，但对于使用早前版本的 ie 用户可能不正确。还记得设置左边和右边的页边空白为自动是居中吗？但是这并不是对所有的 ie 都适用，所以 body{ text-align: center; } 是让 wrapper div 居中在旧版本 ie 的一种云顶国际的解决方案。

（随便说一下，在 firefox 和 ie 中文本大小是不同的，我们稍后解决。）

第3步：设置 header 宽度和布局

让 header 浮到左边并且设置它的宽度为 750px：

#header{
float: left;
width: 750px;
}

第4步：设置 container 宽度和布局

让 container 浮到左边并且宽度为 500px：

#container{
float: left;
width: 500px;
}

第5步：设置 sidebar 宽度和布局

让 sidebar 浮到左边，宽度为240px，并且给它灰色的背景：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}

#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。我们给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。

第6步：设置 footer 的宽度和布局

让 footer 浮到左边，左右两边都没有东西，并且宽度为：750px：

#footer{
clear: both;
float: left;
width: 750px;
}

header 和 footer 的样式有什么区别呢？答案是 footer{} 中有 clear: both;。它在那儿使得 footer 不能和它上面的东西（如 sidebar 或者 container）连接起来。

保存并刷新浏览器。

第7步：给侧边栏增加其余的 10 像素

给侧边栏增加其余的 10 像素的页边空白。现在侧边栏的 css 应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
}

保存并刷新浏览器去查看 10 像素的空白增加到侧边栏的左边了。

margin: 0 0 0 10px; 具体的意思是：上边空白为0，右边空白为0，底部空白为0，左边空白为10像素。当大小为0的时候，px 单位不是必需的。

第8步（额外的步骤）：修正 ie 的双倍页边距 bug

internet explorer 有个双倍页边距的 bug，这样在 ie 下，我们的页面距就是 20像素，20像素的页边距可能会破坏布局并把侧边栏挤到页面的底部，因为一个20像素的页边距使得 container 和 sidebar 的宽度之和为 760px 而不是 750px。为了解决这个问题，增加 display: inline; 到侧边栏。现在你的侧边栏应该是：

.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}

现在的 index.php 和 style.css 文件应该和教程源代码文件夹中的 index-lesson-11.txt 和 style-lesson-11.txt 一致了。