|
在上一章中，对固定宽度的页面布局傲了比较深入地分析和讲解。在本章中,将对变宽度的页面布局做进一步的分析。变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于，宽度不确定，导致很多参数无法确定。因此．必须使用一些技巧来完成。 这里将介绍一些国外的CSS领域著名的设计师的研究成果，并对变宽度网页布局的总体情况进行归纳。希望读者能够保持清晰的思路，这样在实际工作中遇到具体的案例时，就可以灵活地选择解决方法。lodidance.com “1-1-1”布局过于简单，因此这里就不再介绍了。我们从“1-2-1”布局开始，逐步向读者展示更为复杂的布局结构，并逐步归纳出普遍的通用解决方案。 对于变宽度的布局．首先要使内容的整体宽度随浏览器窗口宽度的变化而变化。因此，中间的container容器中的左右两列的总宽度也会变化，这样就会产生不同的情况。这两列是按照一定的比例同时变化，还是一列固定，另一列变化。这两种情况都是很常用的布局方式。下面先从等比例方式讲起。 注意：在分列情况下，某一列有可能是固定宽度的，也可能是变化宽度的。因此为了方便区分，这里再修订一下布局的表达方法，这样对于网页学习网CSS教程资源中的文件命名也会比较方便。规定为，对于并列的若干列，如果某一列是固定列，就用字母“f”（英文单词fixed的第一个字母）表示；如果某一列是变宽的列，就用字母“l”（英文革词“liquid”的第一个字母）表示。 例如，如果某一个“1-2-1”布局中两列并排，左边的是固定宽度列，右边的是变化宽度的列，那么这种布局记作“1-(f-l)-1”。 再例如，如果某一个“1-3-1”布局中3列并排，左右两边的是固定宽度列，中间的是变化宽度的列，那么这种布局记作“1-(f-l-f)-1”。 本教程CSS资源中的案例采用了这种方法命名，读者一看就可以知道是如何布局的了。 一、“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-2-1”浮动布局的基础上完成本案例。原来的“1-2-1”浮动布局中的宽度都是用像素数值确定的固定宽度，下面就来对它进行改造，使它能够自动调整各个模块的宽度。 实际上只需要修改3处宽度就可以了。代码如下。 折叠展开CSS 代码复制内容到剪贴板
经验：container等外层div的宽度设置为83%是相对浏览器窗口而盲的比例；而后面content和side这两个内层div的比例是相对于外层div而言的。这里分别设置为66%和33%，二者相加为99%．而不是l00%。这是为了避免由舍入误差造成总宽度大于它们的容器的宽度，而使某个div被挤到下一行中。如果洗完精确，写成99.9%也可以。 这样就实现了各个diV的宽度都会等比例适应浏览器窗口。这里需要注意两点。 (1) 确保不要使一列或多个列的宽度太大，以至于其内部的文字行宽太宽．造成阅读困难。 (2) 我们制作的每一个圆角框都是使用前面介绍的方法制作的，由于用这种方法制作的圆角框的最宽宽度有限制，因此如果超过此限度就会出现裂缝。 针对上述第2点，解决的办法是，如果确实希望某一个分栏要这么宽，就修改背景图片。只需要修改5个图像中的left-top.gif，使它的覆盖范围更大就可以了。 如果并不需要这么宽，就可以对最大宽度进行限制。也就是说，当浏览器口超过一定宽度时，即使变得再宽，其内容也不再继续扩展。这需要用到前面制作“魔术布局”时介绍的max-width属性。同理．如果一个分栏过窄，视觉效果也会不好，因此也可以通过min-width属性限制最窄宽度。代码如下。 折叠展开CSS 代码复制内容到剪贴板
前面在讲解“魔术布局”的时候提到过，这个方法存在一个问题，即IE 6不支持min-width和max-width这两个属性。同时给出了解决方法，即使用一个JavaScript小程序即可。在HTML的head部分加入如下语句，并将minmax.js文件保存到和页面同一个文件夹中即可。 折叠展开XML/HTML 代码复制内容到剪贴板
二、“1-2-1”单列变宽布局 在上面的例子中，当宽度变化时，各个部分的宽度都会变化，且它们之间的比例保持不变。实际上，只有单列宽度变化，而其他保持周定的布局可能会更实用。一般在存在多个列的页面中，通常比较宽的一个列是用来放置内容的，而窄列放置链接、导航等内容，这些内容一般宽度是固定的，不需要扩大。因此如果能把内容列设置为可以变化，而其他列固定，会是一个很好的方式。 例如在图2中，右侧的Side Bar的宽度固定，当总宽度变化时，Page Content部分就会自动变化。
如果仍然使用简单的浮动布局，是无法实现这个效果的，如果把某一列的宽度设置为固定值，例如200像素，那么另一列（即活动列）的宽度就无法设置了。因为总宽度未知，活动列的宽度也无法确定，那么怎么解决呢？ 这里仍然给出两种方法，首先介绍比较容易理解的“绝对定位”法，然后再对“浮动”法进行改造。 1．“绝对定位”法 在前面讲解固定的“1-2-1”布局时，我们除了使用浮动之外，还使用绝对定位实现过的“1-2-1”布局，现在就以该方案为基础来实现单列适应宽度的制作方法，代码如下。 本案例的文件位于网页学习网CSS教程资源的“第14章\1-2-1\1-(l+f)-1-absolute.htm“。 折叠展开CSS 代码复制内容到剪贴板
对上面的代码原理进行分析如下。 (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”。 折叠展开CSS 代码复制内容到剪贴板
注意，最核心的一点是在活动宽度列（即这里的content）外面又套了一层div．其id设置为contentWrap。中文的意思是content的“包装”，即它把content包裹起来。lodidance.com contentWrap的宽度设置为100%宽度．同时将右侧的margin设置为“-300px”。注意这里是负值，即向左平移了300像素，并设置为向左浮动。content在它的里面，以标准流方式存在，将它的左侧margin设置为300像素，这样就可以保证里面的内容不会溢出到布局的外面。 这种方法的本质就是实现了content列的“100%-300像素”的宽度，确实非常巧妙。 这种方法的最大好处就是可以不用考虑各列的高度，通过设置页脚的clear属性，就可以保证不会发生重叠的现象。代码如下。 折叠展开XML/HTML 代码复制内容到剪贴板
CSS布局中的很多方法都是一些非常杰出的设计帅的研究成果，正是他们不断地探索，才想出了很多非常好的方法，这里列举几篇非常重要的文章题目，这些设计师和他们的文章都极大地影响了Web设计和开发技术的发展。 ● Ryan Brill:《Negative margins technique》 ● Alex Robinson:<Any Order Columns) ● Eric Meyer:《Multi-unit Any Order Colums》 如果读者有兴趣，可以到互联网上找到这些文章，仔细研究。 前面介绍了按比例的宽度适应方法，以及单列宽度适应的制作方法。它们都是基于“1-2-1”布局来做的，制作3列布局或者更为复杂布局的页面的方法也是一样的。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/946.html |
14.1 “1-2-1”变宽度网页布局,布布扣,bubuko.com