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

浏览数：22 / 时间：2015年06月09日

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

这里将介绍一些国外的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 “1-2-1”等比例布局

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

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

折叠CSS 代码复制内容到剪贴板
  1. #content{   
  2.     float:rightright;   
  3.     width:760px; /*删除原来的固定宽度*/  
  4.     width:85%; /*改为比例宽度*/      
  5.     }   
  6.   
  7. #content img{   
  8.     float:rightright;   
  9.     width:500px; /*删除原来的固定宽度*/  
  10.     width:66%; /*改为比例宽度*/      
  11.     }   
  12.   
  13. #side{   
  14.     float:left;   
  15.     width:300px; /*删除原来的固定宽度*/  
  16.     width:33%; /*改为比例宽度*/      
  17.     }  

经验：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 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  min-width:500px;   
  5.  max-width:800px;   
  6.  }

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <!--[if lte IE 6]>  
  2.      <script type="text/javascript" src="minmax.js"></script>  
  3. <![endif]-->

二、“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“。

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  }    
  5.   
  6. #container{   
  7.   position:relative; }   
  8.   
  9. #content{   
  10.     margin:0 300px 0 0;   
  11.     }   
  12.   
  13. #content img{   
  14.     float:right;   
  15.     }   
  16.   
  17. #side{   
  18.     position:absolute;   
  19.     top:0;   
  20.     right:0;   
  21.     width:300px;       
  22.     }

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

(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 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  min-width:500px;   
  5.     max-width:800px;   
  6.   
  7.  }    
  8.   
  9.   
  10. #content{   
  11.     float:right;   
  12.     width:66%;     
  13.     }   
  14.   
  15. #content img{   
  16.     float:right;   
  17.     }   
  18.   
  19. #side{   
  20.     float:left;   
  21.     width:33%;   
  22.     }   
  23.   
  24. #pagefooter{   
  25.     clear:both;   
  26. }

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

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

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

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

折叠XML/HTML 代码复制内容到剪贴板
  1. <body>  
  2. <div id="header">  
  3.     <div class="rounded">  
  4.         <h2>Page Header</h2>  
  5.         <div class="main">  
  6.         </div>  
  7.         <div class="footer">  
  8.         <p>  
  9.         查看详细信息>>  
  10.         </p>    
  11.         </div>  
  12.     </div>  
  13. </div>  
  14. <div id="container">  
  15. <div id="content">  
  16.     <div class="rounded">  
  17.         <h2>Page Content 1</h2>  
  18.         <div class="main">  
  19.         <p>  
  20.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>  
  21.   
  22.         </div>  
  23.         <div class="footer">  
  24.         <p>  
  25.         查看详细信息>>  
  26.         </p>    
  27.         </div>  
  28.     </div>  
  29.     <div class="rounded">  
  30.         <h2>Page Content 2</h2>  
  31.         <div class="main">  
  32.         <img src="images/cup.gif" width="128" height="128" />  
  33.         <p>  
  34.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点，以及如何在网页中引入CSS，并对CSS进行初步的体验。</p>  
  35.   
  36.         </div>  
  37.         <div class="footer">  
  38.         <p>  
  39.         查看详细信息>>  
  40.         </p>    
  41.         </div>  
  42.     </div>  
  43. </div>  
  44. <div id="side">  
  45.     <div class="rounded">  
  46.         <h2>Side Bar 1</h2>  
  47.         <div class="main">  
  48.         <p>  
  49.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。CSS的功能十分强大而又灵活。</p>  
  50.         </div>  
  51.         <div class="footer">  
  52.         <p>  
  53.         查看详细信息>>  
  54.         </p>    
  55.         </div>  
  56.     </div>  
  57. </div>  
  58. </div>  
  59. <div id="pagefooter">  
  60.     <div class="rounded">  
  61.         <h2>Page Footer</h2>  
  62.         <div class="main">  
  63.         <p>  
  64.         这是一行文本，这里作为样例，显示在布局框中。   
  65.         </p>  
  66.         </div>  
  67.         <div class="footer">  
  68.         <p>  
  69.         查看详细信息>>  
  70.         </p>    
  71.         </div>  
  72.     </div>  
  73. </div>  
  74.   
  75. </body>

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教程布局之道》教程列表
编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/946.html

14.1 “1-2-1”变宽度网页布局,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： class 代码 java style html int class 代码 java style html int

相关文章

随机文章

您可能还喜欢

您可能还喜欢