13.4 ＂1-3-1＂固定宽度布局

图1 “1-3-1”布局

这种布局同样可以用两种方法制作，案例文件分别位于网页学习网CSS教程资源“第13章\1-3-1-absolute.htm”和“第13章\1-3-1-float.htm”。

对于这个页面，要在“1-2-1”布局的基础上修改HTML的结构，只需在container中的左边增加一列即可，这里将新增加的列命名为navi。

相信读者已经可以自己写出相应的HTML代码，并使用“绝对定位法”和“浮动法”实现所需的效果，这里就不再赘述了。这里仅给出“浮动法”的CSS样式关键代码。lodidance.com

折叠展开CSS 代码复制内容到剪贴板

1. #header,#pagefooter,#container{
2. margin:0 auto;
3. width:760px;
4. }
5. #navi{
6. float:left;
7. width:200px;
8. }
9. #content{
10. float:left;
11. width:360px;
12. }
13. #content img{
14. float:right;
15. }
16. #side{
17. float:left;
18. width:200px;
19. }
20. #pagefooter{
21. clear:both;
22. }

#navi、#content和#side这3栏都使用浮动方式．3列的宽度之和正好等于总宽度。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表