14.1 “1-2-1”变宽度网页布局

在上一章中，对固定宽度的页面布局傲了比较深入地分析和讲解。在本章中,将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于，宽度不确定，导致很多参数无法确定。因此．必须使用一些技巧来完成。

这里将介绍一些国外的CSS领域著名的设计师的研究成果，并对变宽度网页布局的总体情况进行归纳。希望读者能够保持清晰的思路，这样在实际工作中遇到具体的案例时，就可以灵活地选择解决方法。lodidance.com

“1-1-1”布局过于简单，因此这里就不再介绍了。我们从“1-2-1”布局开始，逐步向读者展示更为复杂的布局结构，并逐步归纳出普遍的通用解决方案。

对于变宽度的布局．首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此，中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种情况都是很常用的布局方式。下面先从等比例方式讲起。

一、“1-2-1”等比例变宽布局

首先实现按比例的适应方式，如图1所示。在这个页面中，网页内容的宽度为浏览器窗口宽度的85%．页面中左侧的边栏的宽度和右侧的内容栏的宽度保持1：2的比例，可以看到无论浏览器窗口宽度如何变化，它们都等比例变化。

本案例的文件位于网页学习网CSS教程资源的“第14章\1-2-1\1-(l+l)-1-absolute.htm”和“第14章\1-2-1\1-(l+l)-1-float.htm”。翦者使用“绝对定位法”制作，后者使用“浮动法”制作。

图1 “1-2-1”等比例布局

我们将在前面制作的“1-2-1”浮动布局的基础上完成本案例。原来的“1-2-1”浮动布局中的宽度都是用像素数值确定的固定宽度，下面就来对它进行改造，使它能够自动调整各个模块的宽度。

实际上只需要修改3处宽度就可以了。代码如下。

这样就实现了各个diV的宽度都会等比例适应浏览器窗口。这里需要注意两点。

(1) 确保不要使一列或多个列的宽度太大，以至于其内部的文字行宽太宽．造成阅读困难。

(2) 我们制作的每一个圆角框都是使用前面介绍的方法制作的，由于用这种方法制作的圆角框的最宽宽度有限制，因此如果超过此限度就会出现裂缝。

针对上述第2点，解决的办法是，如果确实希望某一个分栏要这么宽，就修改背景图片。只需要修改5个图像中的left-top.gif，使它的覆盖范围更大就可以了。

如果并不需要这么宽，就可以对最大宽度进行限制。也就是说，当浏览器口超过一定宽度时，即使变得再宽，其内容也不再继续扩展。这需要用到前面制作“魔术布局”时介绍的max-width属性。同理．如果一个分栏过窄，视觉效果也会不好，因此也可以通过min-width属性限制最窄宽度。代码如下。

前面在讲解“魔术布局”的时候提到过，这个方法存在一个问题，即IE 6不支持min-width和max-width这两个属性。同时给出了解决方法，即使用一个JavaScript小程序即可。在HTML的head部分加入如下语句，并将minmax.js文件保存到和页面同一个文件夹中即可。

二、“1-2-1”单列变宽布局

在上面的例子中，当宽度变化时，各个部分的宽度都会变化，且它们之间的比例保持不变。实际上，只有单列宽度变化，而其他保持周定的布局可能会更实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不需要扩大。因此如果能把内容列设置为可以变化，而其他列固定，会是一个很好的方式。

例如在图2中，右侧的Side Bar的宽度固定，当总宽度变化时，Page Content部分就会自动变化。

图2 “1-2-1”单列变宽布局

如果仍然使用简单的浮动布局，是无法实现这个效果的，如果把某一列的宽度设置为固定值，例如200像素，那么另一列（即活动列）的宽度就无法设置了。因为总宽度未知，活动列的宽度也无法确定，那么怎么解决呢？

这里仍然给出两种方法，首先介绍比较容易理解的“绝对定位”法，然后再对“浮动”法进行改造。

1．“绝对定位”法

在前面讲解固定的“1-2-1”布局时，我们除了使用浮动之外，还使用绝对定位实现过的“1-2-1”布局，现在就以该方案为基础来实现单列适应宽度的制作方法，代码如下。

本案例的文件位于网页学习网CSS教程资源的“第14章\1-2-1\1-(l+f)-1-absolute.htm“。

对上面的代码原理进行分析如下。

(1) 总宽度还是设置为85%，这样总宽度会随浏览器窗口变化。

(2) 将container的position属性设置为relative，使它成为container里面的列的定位基准。

(3) 使side列成为绝对定位，并紧贴container的右侧，宽度设为固定值300像素。

(4) 设置conient列的右侧margin，使它不会与side列重叠。

这样，就实现了单列固定的布局样式。但是前面提到过这种方法有一个同有的缺陷，也就是绝对定位的列将脱离标准流，从而它的高度将不会影响container的高度。这样页脚部分的位置只由content列的高度确定，而当窗口在变化宽度的时候，有可能会使固定宽度列的高度大于活动宽度列的高度，这时就会使固定宽度列与页脚部分重叠。

因此，使用这种方法的时候，要注意保证变宽度列的高度是最高的，就不会发生重叠的现象了。由于HTML代码没有变化，因此这里就不再罗列HTML代码了。

2．“改进浮动”法

现在考虑，使用浮动的方法，实现的困难在哪里。核心问题就是浮动列的宽度应该等于“100%-300px”，而CSS显然不支持这种带有加减法远算的宽度表达方法。但是通过margin可以变通地实现这个宽度。实现的原理是在content的外面再套一个div，使它的宽度为l00%．也就是等于container的宽度。然后通过将左侧的margin设置为负的300像素，就使它向左平移了300像素。再将content的左侧margin设置为正的300像素，就实现了“100%-300px”这个本来无法表达的宽度。

CSS样式代码如下，本案例的文件位于本书光盘的“第14章\1-2-1\1-(l+l)-1-float.htm”。

注意，最核心的一点是在活动宽度列（即这里的content）外面又套了一层div．其id设置为contentWrap。中文的意思是content的“包装”，即它把content包裹起来。lodidance.com

contentWrap的宽度设置为100%宽度．同时将右侧的margin设置为“-300px”。注意这里是负值，即向左平移了300像素，并设置为向左浮动。content在它的里面，以标准流方式存在，将它的左侧margin设置为300像素，这样就可以保证里面的内容不会溢出到布局的外面。

这种方法的本质就是实现了content列的“100%-300像素”的宽度，确实非常巧妙。

这种方法的最大好处就是可以不用考虑各列的高度，通过设置页脚的clear属性，就可以保证不会发生重叠的现象。代码如下。

CSS布局中的很多方法都是一些非常杰出的设计帅的研究成果，正是他们不断地探索，才想出了很多非常好的方法，这里列举几篇非常重要的文章题目，这些设计师和他们的文章都极大地影响了Web设计和开发技术的发展。

● Ryan Brill:《Negative margins technique》

● Alex Robinson:<Any Order Columns)

● Eric Meyer:《Multi-unit Any Order Colums》

如果读者有兴趣，可以到互联网上找到这些文章，仔细研究。

前面介绍了按比例的宽度适应方法，以及单列宽度适应的制作方法。它们都是基于“1-2-1”布局来做的，制作3列布局或者更为复杂布局的页面的方法也是一样的。

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