14.2 “1-3-1”宽度适应布局

“1-3-1”布局可以产生很多不同的变化方式，如下：

● 三列都按比例来适应宽度；

● 一列固定，其他两列按比例适应宽度；

● 两列固定，其他一列适应宽度。

对于后两种情况，又可以根据特殊的一列与另外两列的不同位置，产生出若干种变化。这就像武侠小说中的武功，武林秘籍中的招数总是有限的．而实战中的变化则是无穷的。关键在于是否真正把其中的原理吃透了。最高的武功是所谓“大象无形”的境界，招数已经不重要了。

一、“1-3-1”三列宽度等比例布局

对于“1-3-1”布局的第一种情况，即三列按固定比例伸缩适应总宽度，和前面介绍的“1-2-1”的布局完全一样，只要分配好每一列的百分比就可以了。这里就不再介绍具体的制作过程了。

二、“1-3-1"单侧列宽度固定的变宽布局

对于一列固定，其他两列按比例适应宽度的情况，如果这个固定的列在左边或右边，那么只需要在两个变宽列的外面套一个div，并且这个div宽度是变宽的。它与旁边的固定宽度列构成了一个单列固定的“1-2-1”布局，就可以使用“绝对定位”的方法或者“改进浮动”法进行布局，然后再将变宽列中的两个变宽列按比例并排，就很容易实现了。lodidance.com

绝对定位法的制作过程就不再介绍了，这里仅给出使用浮动法的制作过程。假设现在希望side列宽度固定为200像素，而navi列和content列按照2：3的比例分配剩下的宽度。

请读者思考，如果按照图1所示的结构建立HTML结构，能否实现所需的效果？

图1 结构示意图

答案是否定的。wrap这个容器内部如果只有一个活动列，就像前面的“1-2-1”布局那样，这个活动列以标准流方式放置，它的宽度是自然形成的．这样显示效果是没有问题的。而当wrap容器中有两个浮动的活动列时，就需要分别设置宽度，分别为40%和60%（为了避免四舍五入误差，这里设置59.9%）。请特别注意，这时wrap列的宽度等于container的宽度，因此这里的40%并不是总宽度减去side的宽度以后的40%．而是总宽度的40%，这显然是不对的。

解决的方法就是在容器里面再套一个div．即由原来的一个wrap变为两层，分别叫做outcrWrap和innefWrap，结构如图2所示。

图2 修正后的结构示意图

这样，outerWrap就相当于上面错误方法中的wrap容器。新增加的innerWrap是以标准流方式存在的，宽度会自然伸展，由于设置了200像素的左侧margin，因此它的宽度就是总宽度减去200像素了，这样，innerWrap里面的navi和content就会都以这个新宽度为宽度基准。

CSS代码如下所示。本案例的文件位于网页学习网CSS教程资源的“第14章\1-3-1\一个固定列\1-(l-l-f)-1.htm”。

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

#header,#pagefooter,#container{
margin:0 auto;
width:85%;
}
#outerWrap{
float:left;
width:100%;
margin-left:-200px;
}
#innerWrap{
margin-left:200px;
}
#navi{
float:left;
width:40%;
}
#content{
float:right;
width:59.5%;
}
#content img{
float:right;
}
#side{
float:right;
width:200px;
}
#pagefooter{
clear:both;
}

HTML部分的关键代码如下。

折叠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="outerWrap">
<div id="innerWrap">
<div id="navi">
<div class="rounded">
<h2>Navi Bar 1</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<img src="images/cup.gif" width="128" height="128" />
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</div>
</div>
<div id="side">
<div class="rounded">
<h2>Side Bar 1</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。</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>

二、“1-3-1”中间列宽度固定的变宽布局

本小节将要介绍的布局形式是，固定列被放在中间，它的左右各有一列，并按比例适应总宽度。这是一种很少见的布局形式（最常见的是两侧的列固定宽度，中间列变化宽度）。在中文网站中几乎看不到对这种方式的讨论，英文网站中对这种布局的讨论也大都是作为对CSS的一种练习和研究。这里可以假设要做一个博客网站的页面，可设计为中间列放置链接、导航等内容，左边列放置各篇文章，右边列放置照片。当浏览器窗口变化时，左右两列会自动变化。这个博客页面的结构是很不错的。

如果读者已经充分理解了前面介绍的“改进浮动”法制作单列宽度固定的“1-2-1”布局，就可以把“负margin”的思路继续深化，实现这种不多见的布局。

假设，现在希望页而中间列的宽度是300像素，两边列等宽（不等宽的道理是一样的），即总宽度减去300像素后剩余宽度的50%。此时制作的关键是如何实现“(100%-300px)/2”的宽度。

注意：这里所讲的案倒是基于荷兰设计师Cerben提出来的方法实理的。该设计师的网站的网址是http://algemeenbekend.nl/misc/challenge_gerben_v2.html。遗憾的是他的网站不是英文的。

下面就来讲解“固定单列居中，两侧列适应”的布局方法。

这里以固定的“1-3-1”布局为基础。现在需要在navi和side两个div外面分别套一层div，把它们“包裹”起来，如图3所示。

图3 结构示意图

在“改进浮动”法中已经了解这样做的原因，就是依靠嵌套的两个div，实现相对宽度和绝对宽度的结合。

首先设置好HTML结构，代码如下。奉案例的文件位于网页学习网CSS教程资源的“第14章\1-3-1\一个固定列\1-(l-f-l)-1.htm”。

折叠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="naviWrap">
<div id="navi">
<div class="rounded">
<h2>Navi Bar</h2>
<div class="main">
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
</div>
<div id="content">
<div class="rounded">
<h2>Page Content</h2>
<div class="main">
<img src="images/cup.gif" width="128" height="128" />
<p>
对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</div>
</div>
<div id="sideWrap">
<div id="side">
<div class="rounded">
<h2>Side Bar</h2>
<div class="main">
<p>
但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。这是一行文本，这里作为样例，显示在布局框中。这是一行文本，这里作为样例，显示在布局框中。
</p>
</div>
<div class="footer">
<p>
查看详细信息>>
</p>
</div>
</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>

设置好HTML代码之后，CSS的相美部分代码如下所示。

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

#header,#pagefooter,#container{
margin:0 auto;
width:85%;
}
#naviWrap{
width:50%;
float:left;
margin-left:-150px;
}
#navi{
margin-left:150px;
}
#content{
float:left;
width:300px;
}
#content img{
float:right;
}
#sideWrap{
width:49.9%;
float:right;
margin-right:-150px;
}
#side{
margin-right:150px;
}
#pagefooter{
clear:both;
}

将左侧的naviWrap设置为50%宽度，向左浮动，并通过将左侧margin设置为-150像素，向左平移了150像素。然后在里面的navi中，左侧margin设置为-150像素，补偿回来这150像素。

接着，将content设置为固定宽度，先做浮动，这样就紧贴着navi的右边界。

最后将sideWrap做与navi部分相似的处理，设置为50%宽度，向左浮动。这时本来宽度已经超过100%．会被挤到下一行，但是将右侧margin设置为-150像素后，就不会超过总宽度了。

注意：在实际代码中，并不是将两个活动列宽度都设置为50%。而是将其中一个设置为49.9%。这是为了避免浏览器在计算数值时因四舍五入而导致总宽度大于100%，因此稍微窄一点点，就可保证最右边的列不会被挤到下一行。

这时的效果可以看到，浏览器宽度变化后，中间列的宽度保持不变，而两侧的列宽度发生了变化。

编辑：网页学习网

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