首页 > 代码库 > 13.3 “1-2-1＂固定宽度布局

13.3 “1-2-1＂固定宽度布局

2024-07-08 20:52:48   227人阅读

现在来制作最经常用到的“1-2-1”布局。增加了一个“side”栏。但是在通常状况下，两个div只能竖直排列。为了让content和side能够水平排列。必须把它们放到另-个div中，然后使用浮动或者绝对定位的方法，使content和side并列起来。

本案例将通过两种方法制作，文件分别位于本书光盘“第13章\1-2-1-absolute.htm”和“第13章\1-2-1-float.htm”。

一、准备工作

基于上面的分析，现在将上节的成果案例另存为一个新的文件。在HTML中把content部分复制出一个新的，这个新的id设置为side。然后在它们的外面套一个div，命名为container。关键代码如下：lodidance.com

折叠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 class="rounded">  
  58.         <h2>Side Bar 2</h2>  
  59.         <div class="main">  
  60.         <p>  
  61.         但是如果希望网页能够美观、大方，并且升级方便，维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。   
  62.         </p>  
  63.         </div>  
  64.         <div class="footer">  
  65.         <p>  
  66.         查看详细信息>>  
  67.         </p>    
  68.         </div>  
  69.     </div>  
  70.   
  71. </div>  
  72. </div>  
  73. <div id="pagefooter">  
  74.     <div class="rounded">  
  75.         <h2>Page Footer</h2>  
  76.         <div class="main">  
  77.         <p>  
  78.         这是一行文本，这里作为样例，显示在布局框中。   
  79.         </p>  
  80.         </div>  
  81.         <div class="footer">  
  82.         <p>  
  83.         查看详细信息>>  
  84.         </p>    
  85.         </div>  
  86.     </div>  
  87. </div>  
  88.   
  89. </body>  

其中，#conrainer、#header和#pagefooter并列使用相同的样式；而#content和#side的样式暂时先空着；“#content img”用来把其中的图片设置为右对齐。

可以看到，LOGO图片由于使用了浮动设置，已经脱离标准流，文字会围绕它排列。对于content和side两个div，现在的关键是如何使它们横向并列。这里有不同的方法可以实现。

二、绝对定位法

首先我们用绝对定位的方法实现，相关代码如下。这种方法制作的案例文件位于网页学习网CSS教程资源中“第13章\1-2-1-absolute.htm”。

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

为了使content能够使用绝对定位，必须考虑用哪个元素作为它的定位基准。显然应该是container这个div。因此将#contatiner的position属性设置为relative，使它成为下级元素的绝对定位基准，然后将contenL这个div的position设置为absolute，即绝对定位，这样它就脱离了标准流，side就会向上移动占据原来content所在的位置。将content的宽度和side的左margin设置为相同的数值，就正好可以保证它们并列紧挨着放置，且不会相互重叠。

这时的效果如图1所示。读者可以参考网页学习网CSS教程资源中“第13章\1-2-1-absotute.htm”文件。

图1 使用“绝对定位法”实现的“1-2-1”布局
图1 使用“绝对定位法”实现的“1-2-1”布局

注意：这种方法实现了中间的两列左右并排，但是它存在一个缺陷。当右边的side比左边content高时，显示效果不会有问题，但是如果左边的content栏比右边的side拦高的话，显示就会有问题了。因为此时content栏已经脱离标准流，对container这个div的高度不产生影响，从而pagefooter的位置只根据右边的side栏确定。

这是绝对定位带来的固有问题。如果用这种办法使几个div横向并列，就必须知道哪一列是最高的，并使该列保留在标准流中，使它作为“柱子”，撑起这一部分的高度。

三、浮动法

还可以换一个思路，使用“浮动”来实现这种布局。将刚才的文件另存为一个新文件。在新文件中。HTML郝分代码完全不作修改。在CSS样式部分，稍作修改，将#container的position属性去掉，#content和#side都设置为向左浮动，二者的宽度栩加等于总宽度。例如这里将它们的宽度分别设置为500像素和260像素。

相关代码如下。这种方法制作的案例文件位于网页学习网CSS教程资源中“第13章\1-2-1-float.htm”。

折叠CSS 代码复制内容到剪贴板
  1. #header,#pagefooter,#container{   
  2.  margin:0 auto;   
  3.  width:760px;   
  4.  }    
  5.   
  6.   
  7. #content{   
  8.     float:left;   
  9.     width:500px;       
  10.     }   
  11.   
  12. #content img{   
  13.     float:right;   
  14.     }   
  15.   
  16. #side{   
  17.     float:left;   
  18.     width:260px;   
  19.     }

此时的效果pagefooter的位置还是不正确呢？请读者思考，到这里还差哪一步关键步骤？请读者注意，这个图中的效果虽然也不正确，但是仔细观察pagcfooter部分的右端，和上面的图1是有所区别的。lodidance.com

答案是此时还需要对#pagefooter设置clear属性，以保证清除浮动对它的影响，代码如下：

折叠CSS 代码复制内容到剪贴板
  1. #pagefooter{   
  2.     clear:both;   
  3. }

这时就可以看到正确的效果了，如图1所示。

使用这种方法时，并排的两列中无论哪一列内容变长，都不会影响布局。例如右边叉增加了一个模块，使内容变长，排版效果同样是正确的。

到这里"1-2-1”布局方式我们已经完全可以自由发挥了。只要保证每一个模块自身代码正确，同时使用正确的布局方式，就可以非常方便地放置各模块。

这种方法非常灵活，例如要side从页面右边移动左边，即交换与content的位置，只需要稍微修改一处CSS代码，即可以实现。请读者思考，应该如何修改，以实现如图左右两侧的列交换位置的效果？

答案是将#content的代码由：

折叠CSS 代码复制内容到剪贴板
  1. #content{   
  2.     float:left;   
  3.     width:500px;       
  4.     }

修改为：

折叠CSS 代码复制内容到剪贴板
  1. #content{   
  2.     float:rightright;   
  3.     width:500px;       
  4.     }

这样就可以了。具体原理请读者自己思考。如果还设有想清楚其中的奥妙，请仔细阅读本书的第3章和第4章中关于盒子模型的讲解。

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

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/942.html


联系
我们