13.3 “1-2-1＂固定宽度布局

现在来制作最经常用到的“1-2-1”布局。增加了一个“side”栏。但是在通常状况下，两个div只能竖直排列。为了让content和side能够水平排列。必须把它们放到另-个div中，然后使用浮动或者绝对定位的方法，使content和side并列起来。

本案例将通过两种方法制作，文件分别位于本书光盘“第13章\1-2-1-absolute.htm”和“第13章\1-2-1-float.htm”。

一、准备工作

基于上面的分析，现在将上节的成果案例另存为一个新的文件。在HTML中把content部分复制出一个新的，这个新的id设置为side。然后在它们的外面套一个div，命名为container。关键代码如下：lodidance.com

折叠XML/HTML 代码复制内容到剪贴板

<body>
<div id="header">
<div class="rounded">
<h2>Page Header</h2>
<div class="main">
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="container">
<div id="content">
<div class="rounded">
<h2>Page Content 1</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
<div class="rounded">
<h2>Page Content 2</h2>
<div class="main">
<img src="images/cup.gif" width="128" height="128" />
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="side">
<div class="rounded">
<h2>Side Bar 1</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。CSS的功能十分强大而又灵活。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
<div class="rounded">
<h2>Side Bar 2</h2>
<div class="main">
<p>
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</div>
<div id="pagefooter">
<div class="rounded">
<h2>Page Footer</h2>
<div class="main">
<p>
这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</body>

其中，#conrainer、#header和#pagefooter并列使用相同的样式；而#content和#side的样式暂时先空着；“#content img”用来把其中的图片设置为右对齐。

可以看到，LOGO图片由于使用了浮动设置，已经脱离标准流，文字会围绕它排列。对于content和side两个div，现在的关键是如何使它们横向并列。这里有不同的方法可以实现。

二、绝对定位法

首先我们用绝对定位的方法实现，相关代码如下。这种方法制作的案例文件位于网页学习网CSS教程资源中“第13章\1-2-1-absolute.htm”。

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

#header,#pagefooter,#container{
margin:0 auto;
width:760px;
}
#container{
position:relative; }
#content{
position:absolute;
top:0;
left:0;
width:500px;
}
#content img{
float:right;
}
#side{
margin:0 0 0 500px;
}

为了使content能够使用绝对定位，必须考虑用哪个元素作为它的定位基准。显然应该是container这个div。因此将#contatiner的position属性设置为relative，使它成为下级元素的绝对定位基准，然后将contenL这个div的position设置为absolute，即绝对定位，这样它就脱离了标准流，side就会向上移动占据原来content所在的位置。将content的宽度和side的左margin设置为相同的数值，就正好可以保证它们并列紧挨着放置，且不会相互重叠。

这时的效果如图1所示。读者可以参考网页学习网CSS教程资源中“第13章\1-2-1-absotute.htm”文件。

图1 使用“绝对定位法”实现的“1-2-1”布局

注意：这种方法实现了中间的两列左右并排，但是它存在一个缺陷。当右边的side比左边content高时，显示效果不会有问题，但是如果左边的content栏比右边的side拦高的话，显示就会有问题了。因为此时content栏已经脱离标准流，对container这个div的高度不产生影响，从而pagefooter的位置只根据右边的side栏确定。

这是绝对定位带来的固有问题。如果用这种办法使几个div横向并列，就必须知道哪一列是最高的，并使该列保留在标准流中，使它作为“柱子”，撑起这一部分的高度。

三、浮动法

还可以换一个思路，使用“浮动”来实现这种布局。将刚才的文件另存为一个新文件。在新文件中。HTML郝分代码完全不作修改。在CSS样式部分，稍作修改，将#container的position属性去掉，#content和#side都设置为向左浮动，二者的宽度栩加等于总宽度。例如这里将它们的宽度分别设置为500像素和260像素。

相关代码如下。这种方法制作的案例文件位于网页学习网CSS教程资源中“第13章\1-2-1-float.htm”。

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

#header,#pagefooter,#container{
margin:0 auto;
width:760px;
}
#content{
float:left;
width:500px;
}
#content img{
float:right;
}
#side{
float:left;
width:260px;
}

此时的效果pagefooter的位置还是不正确呢？请读者思考，到这里还差哪一步关键步骤？请读者注意，这个图中的效果虽然也不正确，但是仔细观察pagcfooter部分的右端，和上面的图1是有所区别的。lodidance.com

答案是此时还需要对#pagefooter设置clear属性，以保证清除浮动对它的影响，代码如下：

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

#pagefooter{
clear:both;
}

这时就可以看到正确的效果了，如图1所示。

使用这种方法时，并排的两列中无论哪一列内容变长，都不会影响布局。例如右边叉增加了一个模块，使内容变长，排版效果同样是正确的。

到这里"1-2-1”布局方式我们已经完全可以自由发挥了。只要保证每一个模块自身代码正确，同时使用正确的布局方式，就可以非常方便地放置各模块。

这种方法非常灵活，例如要side从页面右边移动左边，即交换与content的位置，只需要稍微修改一处CSS代码，即可以实现。请读者思考，应该如何修改，以实现如图左右两侧的列交换位置的效果？

答案是将#content的代码由：

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

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

修改为：

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

#content{
float:rightright;
width:500px;
}

这样就可以了。具体原理请读者自己思考。如果还设有想清楚其中的奥妙，请仔细阅读本书的第3章和第4章中关于盒子模型的讲解。

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

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/942.html