首页 > 代码库 > 13.3 “1-2-1"固定宽度布局
13.3 “1-2-1"固定宽度布局
现在来制作最经常用到的“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 代码复制内容到剪贴板
其中,#conrainer、#header和#pagefooter并列使用相同的样式;而#content和#side的样式暂时先空着;“#content img”用来把其中的图片设置为右对齐。 可以看到,LOGO图片由于使用了浮动设置,已经脱离标准流,文字会围绕它排列。对于content和side两个div,现在的关键是如何使它们横向并列。这里有不同的方法可以实现。 二、绝对定位法 首先我们用绝对定位的方法实现,相关代码如下。这种方法制作的案例文件位于网页学习网CSS教程资源中“第13章\1-2-1-absolute.htm”。 折叠CSS 代码复制内容到剪贴板
为了使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”布局 注意:这种方法实现了中间的两列左右并排,但是它存在一个缺陷。当右边的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 代码复制内容到剪贴板
此时的效果pagefooter的位置还是不正确呢?请读者思考,到这里还差哪一步关键步骤?请读者注意,这个图中的效果虽然也不正确,但是仔细观察pagcfooter部分的右端,和上面的图1是有所区别的。lodidance.com 答案是此时还需要对#pagefooter设置clear属性,以保证清除浮动对它的影响,代码如下: 折叠CSS 代码复制内容到剪贴板
这时就可以看到正确的效果了,如图1所示。 使用这种方法时,并排的两列中无论哪一列内容变长,都不会影响布局。例如右边叉增加了一个模块,使内容变长,排版效果同样是正确的。 到这里"1-2-1”布局方式我们已经完全可以自由发挥了。只要保证每一个模块自身代码正确,同时使用正确的布局方式,就可以非常方便地放置各模块。 这种方法非常灵活,例如要side从页面右边移动左边,即交换与content的位置,只需要稍微修改一处CSS代码,即可以实现。请读者思考,应该如何修改,以实现如图左右两侧的列交换位置的效果? 答案是将#content的代码由: 折叠CSS 代码复制内容到剪贴板
修改为: 折叠CSS 代码复制内容到剪贴板
这样就可以了。具体原理请读者自己思考。如果还设有想清楚其中的奥妙,请仔细阅读本书的第3章和第4章中关于盒子模型的讲解。 点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/942.html |