首页 > 代码库 > 14.2 “1-3-1”宽度适应布局

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

2024-07-08 20:57:43   223人阅读

“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 结构示意图
图1 结构示意图

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

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

图2 修正后的结构示意图
图2 修正后的结构示意图

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

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

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  }    
  5.   
  6. #outerWrap{   
  7.     float:left;   
  8.     width:100%;   
  9.     margin-left:-200px;   
  10.     }   
  11.        
  12. #innerWrap{   
  13.     margin-left:200px;   
  14.     }   
  15.   
  16.   
  17. #navi{   
  18.     float:left;   
  19.     width:40%;   
  20.     }   
  21.   
  22.   
  23. #content{   
  24.     float:right;   
  25.     width:59.5%;   
  26.     }   
  27.   
  28. #content img{   
  29.     float:right;   
  30.     }   
  31.   
  32.   
  33. #side{   
  34.     float:right;   
  35.     width:200px;   
  36.     }   
  37.   
  38. #pagefooter{   
  39.     clear:both;   
  40. }  

HTML部分的关键代码如下。

折叠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="outerWrap">  
  16. <div id="innerWrap">  
  17. <div id="navi">  
  18.     <div class="rounded">  
  19.         <h2>Navi Bar 1</h2>  
  20.         <div class="main">  
  21.         <p>  
  22.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>  
  23.   
  24.         </div>  
  25.         <div class="footer">  
  26.         <p>  
  27.         查看详细信息>>  
  28.         </p>    
  29.         </div>  
  30.     </div>  
  31. </div>  
  32. <div id="content">  
  33.     <div class="rounded">  
  34.         <h2>Page Content</h2>  
  35.         <div class="main">  
  36.         <img src="images/cup.gif" width="128" height="128" />  
  37.         <p>  
  38.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。</p>  
  39.   
  40.         </div>  
  41.         <div class="footer">  
  42.         <p>  
  43.         查看详细信息>>  
  44.         </p>    
  45.         </div>  
  46.     </div>  
  47. </div>  
  48. </div>  
  49. </div>  
  50. <div id="side">  
  51.     <div class="rounded">  
  52.         <h2>Side Bar 1</h2>  
  53.         <div class="main">  
  54.         <p>  
  55.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。</p>  
  56.         </div>  
  57.         <div class="footer">  
  58.         <p>  
  59.         查看详细信息>>  
  60.         </p>    
  61.         </div>  
  62.     </div>  
  63. </div>  
  64. </div>  
  65.   
  66. <div id="pagefooter">  
  67.     <div class="rounded">  
  68.         <h2>Page Footer</h2>  
  69.         <div class="main">  
  70.         <p>  
  71.         这是一行文本，这里作为样例，显示在布局框中。   
  72.         </p>  
  73.         </div>  
  74.         <div class="footer">  
  75.         <p>  
  76.         查看详细信息>>  
  77.         </p>    
  78.         </div>  
  79.     </div>  
  80. </div>  
  81. </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 结构示意图
图3 结构示意图

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

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

折叠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="naviWrap">  
  16. <div id="navi">  
  17.     <div class="rounded">  
  18.         <h2>Navi Bar</h2>  
  19.         <div class="main">  
  20.         <p>  
  21.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</p>  
  22.   
  23.         </div>  
  24.         <div class="footer">  
  25.         <p>  
  26.         查看详细信息>>  
  27.         </p>    
  28.         </div>  
  29.     </div>  
  30. </div>  
  31. </div>  
  32. <div id="content">  
  33.     <div class="rounded">  
  34.         <h2>Page Content</h2>  
  35.         <div class="main">  
  36.         <img src="images/cup.gif" width="128" height="128" />  
  37.         <p>  
  38.         对于一个网页设计者来说，HTML语言一定不会感到陌生，因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。本课从CSS的基本概念出发，介绍CSS语言的特点。</p>  
  39.   
  40.         </div>  
  41.         <div class="footer">  
  42.         <p>  
  43.         查看详细信息>>  
  44.         </p>    
  45.         </div>  
  46.     </div>  
  47. </div>  
  48. <div id="sideWrap">  
  49. <div id="side">  
  50.     <div class="rounded">  
  51.         <h2>Side Bar</h2>  
  52.         <div class="main">  
  53.         <p>  
  54.         但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。这是一行文本，这里作为样例，显示在布局框中。这是一行文本，这里作为样例，显示在布局框中。   
  55.         </p>  
  56.         </div>  
  57.         <div class="footer">  
  58.         <p>  
  59.         查看详细信息>>  
  60.         </p>    
  61.         </div>  
  62.     </div>  
  63. </div>  
  64. </div>  
  65. </div>  
  66. <div id="pagefooter">  
  67.     <div class="rounded">  
  68.         <h2>Page Footer</h2>  
  69.         <div class="main">  
  70.         <p>  
  71.         这是一行文本，这里作为样例，显示在布局框中。   
  72.         </p>  
  73.         </div>  
  74.         <div class="footer">  
  75.         <p>  
  76.         查看详细信息>>  
  77.         </p>    
  78.         </div>  
  79.     </div>  
  80. </div>  
  81.   
  82. </body>

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

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:85%;   
  4.  }    
  5.   
  6. #naviWrap{   
  7. width:50%;   
  8. float:left;   
  9. margin-left:-150px;    
  10. }   
  11.   
  12. #navi{   
  13. margin-left:150px;     
  14.     }   
  15.   
  16.   
  17. #content{   
  18.     float:left;   
  19.     width:300px;       
  20.     }   
  21.   
  22. #content img{   
  23.     float:right;   
  24.     }   
  25.   
  26. #sideWrap{   
  27.     width:49.9%;   
  28. float:right;   
  29. margin-right:-150px;       
  30.   
  31. }   
  32.   
  33. #side{   
  34. margin-right:150px;    
  35.     }   
  36.   
  37. #pagefooter{   
  38.     clear:both;   
  39. }

将左侧的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

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


联系
我们