网络编程
位置:首页>> 网络编程>> 网页设计>> 牢不可破的九宫格布局

牢不可破的九宫格布局

作者:by0001 来源:冰极峰 发布时间:2009-07-24 12:40:00 

标签:九宫格,css,布局

在我的前一篇教程《九宫格基本布局》中,我介绍了用相对定位加绝对定位的方法来制作九宫格的基本布局。这是一种比较符合人们惯性思维的方法,好像制作过程中一切都是顺理成章的事情,然而因为IE6让人恶心的奇偶性BUG,使得这种布局方法要想通用变得有点遥不可及,因为国内大多数用户还是用着IE6,我们不能因此而丢掉这部分用户。

这个BUG目前是无药可治,也没有什么Hack技巧能运用,唯一能用的方式就是绕开它。也就是说我要定位这九宫格的四个角容器的位置,绝对定位的方法是不能采用的了,这不吝是一个重大的打击,这将完全推翻我前一篇文章中用到的方法,我们只好另起炉灶了。

那么还有那些技术能够拯救这个BUG于水深火热之中呢?我们知道如果用左右浮动的方法能够准确地将元素对象发生偏移,并且这种方法也能避免IE6的奇偶性BUG。OK,我们就用它了。


【布局的重点和难点】

我们还是按照表格的结构来构建我们新模型的结构体,然而这次会相对于前一篇文章的结构有所改变。在这个模型中我们要关注的重点和难点是以下这两点:

1、 t_m和b_m这两个中间容器的宽度值必须是一个百分比的值,否则不能保证整个九宫格的左右动态伸展,它决不能为某个固定的像素值。其宽度等于总容器宽度减去两侧角容器宽度之和的百分比值。其计算公式为:

t_m(或b_m)的宽度=(总容器宽度-(左上角容器宽+右上角容器宽度))/总容器宽度

也就是说t_m或b_m的宽度不是100%,然而t_l和t_r这两个容器的宽度在实际案例中一般是一张图片的宽度,所以它一般都是一个固定宽度值,这样在一个同行的三个容器中,左右两侧宽度是固定值,而中间又要求是百分比,并且这三个容器的总宽度加起来应该是100%,这该怎么办呢?

这里我们采用一种比较稳妥的办法来让中间容器能达到理想的宽度百分比:

我们可以用一个DIV容器,设置它的padding:0 10px;不设置它的宽度,默认状况下,它的宽度就是100%的。因为设置了左右的padding值,则其内部的宽度就是我们要的t_m的理想宽度值,因此我们再给它内部定义一个容器,这个子容器宽度设置为100%。这个子容器的背景色就可以设置为左右水平平铺的背景图片。这个子容器就是我们要用到的上顶边容器。它满足了我们对宽度值的特殊要求。

  因此这个t_m的结构就可以做成如下的结构:   

<div class="top"><span class="t_m"></span></div>

然而这样定义会导致另外一个问题,这个问题在IE7以下的浏览器的都存在,因为我们定义了padding,会在下面的中间的主体层中也同时产生左右侧的内补丁,这里有点不明白的是:为什么会对IE7产生影响?

     因此其补救方法是在这儿针对IE6和IE7应用一个HACK技巧:

.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}

这句话是针对三种浏览器设置不同的偏移值,将b_l和b_r向左右偏移到指定的位置。

2、 b_l和b_r这两个容器的高度值必须相同,以使它们可以一直垂直向下平铺背景色。这样,当中间主体内容区(context)中内容的高度发生改变时,其两侧的背景色能一直和主体内容区(context)保持同一高度。也就是说它们能根据内容主体的高度而自由地拉伸自己的高度值。

我们可以采用在平时工作中经常用到的多列同高的方法来处理这个问题。这个方法就是采用内补丁和负外补丁相结合的方式来达到多列同高:

.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}

我们将m_l和m_r的下内补丁padding-bottom的值设置为一个相对比较大的值,比如我将它们设置为30000px(你可以将它设置为你想要的值),相信一般的情况下,是不会超过这个高度值了。然后将下外补丁(margin-bottom)设置为和下内补丁(padding-bottom)值相同的负值,将它拉回到原来的位置上,并将总容器(box)设置overflow:hidden;,截除多余的高度,就可以保证两列同高。

  将上面两个难点问题解决后,余下的事情就是简单而愉快的事情了!

 【结构层】

     现在我们将结构层在前一个案例的基础上作了一下调整,因此就成了下面这样一种结构了:

<div class="box">
    <!--第一行—顶部*/-->
    <div class="top"><span class="t_m"></span></div>
    <span class="t_l"></span> 
    <span class="t_r"></span>
    <!--第二行—中间内容区*/-->
    <span class="m_l"></span>
    <span class="m_r"></span>
    <div class="context">内容主体区域</div>
    <!--第三行—底部*/-->
    <div class="b_m"><span></span></div>
    <span class="b_l"></span>
    <span class="b_r"></span>
</div>

    【样式层】
     下面是主要的样式设置:    

 /*总容器*/
   .box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
   .box span{display:block;}  
   /*顶部样式*/
   .top{height:10px;padding:0 10px;}
   .t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
   .t_l{float:left;background:#ff0000;}/*左上角*/
   .t_r{float:right;background:#ff0000;}/*右上角*/
   .t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*这是可左右伸展的区域,两例留出空白便于放置左右角容器*/  
   /*中间样式*/
   .m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*两列等高*/
   .m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左边框*/ 
   .m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右边框*/ 
   /*底部样式*/
   .b_m{padding:0 10px;height:10px;}/*这是可左右伸展的区域,两例留出空白便于放置左右列同高容器*/
   .b_m span{width:100%;height:10px;font-size:0%;background:#7F0000;}
   .b_l,.b_r{height:10px;font-size:0%;width:10px;margin-top:-10px;}
   .b_l{float:left;background:#ff0000;}/*左下角*/
   .b_r{float:right;background:#ff0000;}/*右下角*/ 

经过上述设置后,我们的九宫格就算完成了,它是“牢不可破”的,会随着内容主体的宽高动态地向各个方向自由伸展。在此模型中,为了演示的效果,我将总容器的宽度设置了一个百分比50%,你可以根据你的实际需要调整它的大小,其内部会随着它的宽度值自动填充整个区域,不会撑破父容器。如下图所示:

 

你可以用八张图片来制作一个漂亮的九宫格盒子。看看它的完美表现。


本模型在以下浏览器中测试通过:

IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。


0
投稿

猜你喜欢

  • 这一段时间,我在进行“09帮助中心升级”项目,负责其中的白板和视觉设计,总算和Axure有了第一次的正式会晤。由于之前已经零散地学习过一些A
  • 算法是计算机科学中一个重要的研究方向,是解决复杂问题的关键。在计算机世界中,算法无处不在。数据库是存储数据和执行大批量计算的场所,在数据库中
  • 首先,必须有错误继续进行的声明On Error Resume Next 然后尝试简历jmail实例: Dim JMail Set JMail
  • Dethe Elza (delza@livingcode.org), 高级技术架构师, Blast Radius  &n
  • 最近的项目涉及到很多表单的制作,特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现,单(复)选框和它们后面的提
  • 表单的验证是开发WEB应用程序中常遇到的一关。有时候我们必须保证表单的某些项必须填写、必须为数字、必须是指定的位数等等,这时候就要用到表单验
  • 今天做项目时,有一个这样的需求,需要动态删除的Tab,比如:可以删除某一个,可以删除多个。每一个Tab对应一个iframe。本来我的代码是这
  • 在本文中,我将说明如何用SQL Server的工具来优化数据库索引的使用,本文还涉及到有关索引的一般性知识。 关于索引的常识 影响到数据
  • 事务日志(Transaction logs)是数据库结构中非常重要但又经常被忽略的部分。由于它并不像数据库中的schema那样活跃,因此很少
  • 这个问题已经不是什么新鲜问题了,网上也有大把的教程,但大多数是授人以鱼,而不授人以渔,经过辛苦的资料收集,思考,调试,整理,我基本上已经把这
  • Web 设计离不开调色板,现成的调色板多不胜数,不管是 Windows 标准色板,还是 Web 标准色板,还是 Pantone 色板,它们虽
  • 代理模式的优点代理模式可以保护原对象,控制对原对象的访问;代理模式可以增强原对象的功能,通过代理对象来添加一些额外的功能;代理模式可以提高系
  • 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢
  • global.asa<SCRIPT LANGUAGE="VBScript" RUNAT=&qu
  • 月份转换到中文Function MonthToCH(TheMonth) Dim mm mm=split("一,
  • InstrRev描述:返回某字符串在另一个字符串中出现的从结尾计起的位置。语法:InstrRev(string1, string2
  • 成天都要与样式打交道的朋友,相信对CSS选择符(CSS Selectors)都不会陌生。不过对于刚接触或者还不是很熟悉css的朋友来说,能够
  • 一个页面执行一次Sql语句的话,不会影响到性能。如果一个页面要执行很多次Sql语句,而且使用的是同一个数据库连接,那么上面的方法可能会影响到
  •   ASP中从数据库读取二进制文件数据代码:<%driver_name1="DRIVER={Microsoft&n
  • 如果没有了解栅格系统是什么,建议看完这篇文章以后再回来。其实有很种 CSS 写法实现栅格系统,很多 CSS 库也都会提供类似的栅格系统实现(
手机版 网络编程 asp之家 www.aspxhome.com