WP Theme 教程 #11：宽度和布局
June 21st, 2007 at 08:59pm 雪山飞猪 浏览: 4,993
这篇将涉及如何设置每个 DIV 的宽度和布局排版。同样也会向你展示如何让你的主题显示正确，并同时在 Firefox 和 IE 显示相同。
在我们开始之前，打开下面这些东东：Xampp Control，主题文件夹，Firefox 浏览器，IE 浏览器，index.php和style.css这两个文件。
第1步：
第一件你要去做的事情就是你要决定你主题的总体宽度。我们使用 750px（750 像素）；每个 100 像素是1英寸。你的主题取决于你绝大多数博客访问者的查看规格。你需要避免的是使用 900px 的主题，如果你的读者都大多数使用 800px × 600px 的屏幕，这样的话，你的 900px 主题将会有 100px 超出他们的屏幕。那是无法接受的。
不管怎样，你怎么样把你总体宽度设置为 750px 呢？
你需要把所有的东东放入一个 750px 盒子中或者 DIV 标签。所有东西是指包括：header，container，sidebar 和 footer。
在 <body> 之后增加：<div id=”wrapper”>
在 </body> 之前增加：</div>
在 style.css 文件中输入以下代码：
#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}
在 CSS，具体是在 style.css 中， # 号是你用来指向跟着 id 的 DIV。而点号是用来指向跟着 class的 DIV。举个 class 的例子，如果你的代码是 <div class=”wrapper”>，那么就用 .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 浮到左边并且设置它的宽度为 750px：
#header{
float: left;
width: 750px;
}
第4步：
让 Container 浮到左边并且宽度为 500px：
#container{
float: left;
width: 500px;
}
第5步：
让 Sidebar 浮到左边，宽度为240px，并且给它灰色的背景：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
}
注意，你没有使用 # 号去指出 Sidebar DIV，而是使用点号。#ffffff 是白色而background: #eeeeee; 是非常浅的灰色。你给侧边栏增加一个背景颜色只是去查看当增加剩下的 10 像素之后的不同之处。
第6步：
让 Footer 浮到左边，左右两边都没有东西，并且宽度为：750px：
#footer{
clear: both;
float: left;
width: 750px;
}
Header 和 Footer 的样式有什么区别呢？答案是 footer{} 中有 clear: both;。它在那儿使得 Footer 不能和它上面的东西（如 Sidebar 或者 Container）连接起来。
保存并刷新浏览器。
第7步：
给侧边栏增加其余的 10 像素的页边空白。现在你的侧边栏应该是下面这个样子：
.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步（额外的步骤）：
这是为了一旦你使用了20像素的页边距而不是10像素。20像素的页边距可能会破坏你的布局并把侧边栏挤到页面的底部，因为一个20像素的页边距使得 Container 和 Sidebar 的宽度之和为 760px 而不是 750px。这额外的步骤是 Internet Explorer 的错，这个使得双倍页边距的 bug 在 Firefox 中并不存在。
为了解决这个问题，增加 display: inline; 到侧边栏。现在你的侧边栏应该是：
.sidebar{
float: left;
width: 240px;
background: #eeeeee;
margin: 0 0 0 10px;
display: inline;
}
这篇到此为止，如果你有什么问题就请大胆问吧，我会进自己最大努力帮你的，不要让你仅仅成为只是来这里逛逛的常客。
下一篇：WP Theme 教程 #12：日志样式化和其他杂项
请查看教程目录：WordPress 主题教程系列
翻译自：WP Theme Lesson #11: Widths and Floats
创建 WordPress 主题系列教程均为本站翻译，如要转载，请注明：转载自我爱水煮鱼和本文地址。
作者：雪山飞猪
原文链接：WP Theme 教程 #11：宽度和布局
我爱水煮鱼版权所有，转载时必须以链接形式注明作者和原始出处及本声明。
1. scaredcrow | June 21st, 2007 at 11:06 pm
你好，我想问一下，我那个RECENT COMMENTS插件那里好像有点显示的问题，在IE6下显示是正常的，但是在IE7下，如果标题过长，就会重叠。。。能不能帮忙解决下啊？谢谢了。。。。期待中。。。
[回复该留言]
2. 雪山飞猪 | June 22nd, 2007 at 12:18 am
这个问题我可能帮不了你，因为我没有用这插件，现在也比较忙，没有时间去帮你研究它。不过我提供我的解决方案，本博客使用的Most Recent Comments 不是通过插件来实现的，而是通过函数实现：get_recent_comments.txt。把该函数复制到functions.php上，然后通过下面方式在Sidebar.php中调用它：
< ?php BX_get_recent_comments(7); ?>
[回复该留言]
3. scaredcrow | June 22nd, 2007 at 1:00 pm
哈哈！谢谢了。问题解决了。。。用了另一个插件。
不过还是再去试下你的方法
[回复该留言]
4. kusanagi | August 1st, 2007 at 10:33 pm
这一段是我的Recent Posts的代码 想请教一下:)
后面的那个5是限制最近发表日志的字数,但仅对英文单词有效,也就是内容只显示5个词,但这个对中文的日志不起作用,想问下要怎样改才可以限制中文字数呢?
[回复该留言]
5. kusanagi | August 1st, 2007 at 10:35 pm
?php
$mycontent = getWords(get_the_content(), 5);?
- -没加括号
[回复该留言]
6. 雪山飞猪 | August 1st, 2007 at 10:59 pm
代码呢？
[回复该留言]
7. kusanagi | August 2nd, 2007 at 12:09 pm
http://images.blogcn.com//2007/8/2/12/kofgeneration,20070802121330039.jpg
-_- 代码打不出来 所以截了个图
[回复该留言]
8. 雪山飞猪 | August 2nd, 2007 at 2:40 pm
看看 get_recent_comments.txt 中的第一个函数，或许就知道怎么做了
[回复该留言]
9. Ks Home | August 20th, 2007 at 10:53 am
2010年以后LCD显示器将占领70%的显示器市场，所以你说用超过750px会给用户体验带来不便，这个在以后来说 是不可能的
现在有多少显示器分辨率还是使用800×600呢
个人以为宽点好看些～～～
[回复该留言]
10. 新手 | September 11th, 2007 at 4:33 pm
我作出来的怎么都是靠左边 请问是哪的问提?
[回复该留言]
11. xBodhi | September 23rd, 2007 at 4:37 am
怎么是每100像素一英寸呢……
[回复该留言]
12. eagleguo998 | November 23rd, 2007 at 12:54 am
IE与Opera没有办法正常解析你在这页里说的CSS效果。
Firefox效果正常。
初学者，能帮帮我吗？
[回复该留言]
13. eagleguo998 | November 23rd, 2007 at 12:58 am
我IE的版本是6.0.2900，
这个版本应该在你所说的IE6的行列内吧。不过还是不能正常居中显示。
[回复该留言]
14. 雪山飞猪 | November 23rd, 2007 at 1:07 pm
@eagleguo998 这个是CSS的问题，好好学下 CSS 吧！
[回复该留言]
雪山，之前的都很顺利，但是此章对于页面的定义我这里都没有效果。检查了CSS编码也没有错误，难道是因为不支持WP2.5.1？
期待你的回复。
[回复该留言]
终于找到原因了，原来是全角和半角搞错，导致所有的ID和Class定义未被识别。
希望别人不要犯和我一样的错误。
[回复该留言]
我就和你犯了一样的错误啊
我在W3C监测里
发现了46个错误啊，最后不得不再把雪山大哥的INDEX.PHP又复制了一遍~~
[回复该留言]
15. Persephone | December 12th, 2007 at 2:31 pm
呵呵，我跟 eagleguo998这位朋友正好相反，IE显示正常，FIREFOX反而显不出来。
[回复该留言]
16. Justin | April 6th, 2008 at 9:57 am
代码怎么放到http://validator.w3.org/check上有42个error啊，我试的也会有这么多，怎么解决啊？
[回复该留言]
是输入法没有调好啊
暂时还是复制一下源文件吧~~
[回复该留言]
17. aylie | June 25th, 2008 at 4:43 pm
学习了~
[回复该留言]
18. hedy | July 9th, 2008 at 10:06 am
为什么提示未定义侧边栏呢？请问应该怎么改？
[回复该留言]
19. hedy | July 9th, 2008 at 10:10 am
哦，好了，我把functions的s丢了，(*^__^*) 嘻嘻……
[回复该留言]
20. xiami | August 20th, 2008 at 9:35 pm
# text-align: left; 是让 wrapper DIV 中的文本向左对齐因为你会改变 body{ text-align: left;} 到 text-align: center;
在wrapper中为什么还要加个text-align:left;
为什么说会变成剧中对齐？
期待回答
[回复该留言]
21. xiami | August 20th, 2008 at 9:59 pm
为什么侧边栏用class有什么方便的地方吗？用id是不是也行作者为什么强调用class.
另外siderbar左边留个10px的空间，不留行吗
这直接导致了文章的第8步我看不懂。另外关于ie的bug什么的也不懂
期待回答！！！
[回复该留言]