九宫格基本布局（2）
作者：by0001 来源：蓝色理想 发布时间：2009-06-18 18:36:00
标签：窗口,设计,布局,九宫格
注意：
这里有两个地方需要注意到：
1、就是t_m和b_m这两个容器是需要水平平铺的，所以需要将它的z-index设置为比左右两角的div的z-index的值低，我们将它设置为z-index:1;这样它就置于t_l和t_r的下面了，然后，我们设置它的宽度为100％，让它水平铺满整个第一行的宽度。
.t_m{ z-index:1;width:100％; }
2、对于m_l，m_r这两个div容器，因为要让背景向下垂直平铺，所以我们将它们的高度值设为一个非常大的值，我们将它设置为20000px，让它一直向下垂直平铺，然后因为总容器设置了overflow:hidden，会将多余的部分切除。
这样一个基本的九宫格布局就形成，你可以查看下面的演示模型。
本模型在以下浏览器中测试通过：
IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
运行代码框
似乎到这儿就该结束了，然而….
要是细心的朋友在测试本模型时会发现，在IE6浏览器中，会与一个BUG不期而遇，那就是［IE6宽高值奇数1px BUG］，估且这么称呼吧，因为对于这个BUG，网络上并没有一个统一的称呼。
这个bug的激发条件是：
一个相对定位的父容器，其子容器采用绝对定位的方式向左或向右靠齐，当父容器的宽度值为奇数时，父容器与子容器之间会存在１px的间隙。不能完全紧贴在一起。
而我这个演示模型刚好满足了条件…
所以当你在IE6浏览器中缩小窗口，并进行拖拉缩放时，最右边和下面的两个小方块和父容器中会出现一个１px的空距。
如果你觉得不用考虑IE6的话，那么这种布局就已经基本满足你的需要了。
然而，对于一些比较追求完美的设计者来说，这是让人无法容忍的。
……
0
投稿猜你喜欢
- 从2003年到现在，从ACCESS到SQL SERVER的使用。在ACCESS中没有存储过程的概念。在使用过程中，发现ACCESS与SQL
- 今天在 经纬 同学blog看到的。有这么一段代码：<ul id="demo"><li>
在风起云涌的互联网浪潮中，产品迭代的速度越来越快。随着用户需求的激增，也不断带来了对设计师能力要求的提高。初入交互设计领域几年来，明显发现可- jxdawei的blog：http://www.iwcn.net/本文讨论的是在web标准普及的形势下，网站程序员的定位以及如何与设计师配合
- 一、概述公司新购了一批PC，准备把几个性能较优的PC升级为数据库服务器，替换老旧的机器。公司有套POS终端软件，后台数据存储是 MySQL
- 因为一个需求，因为自己想多了一点东西，最后发现了一个问题，一个很奇怪的问题。这个问题我想还是我自己当初想法上的出路导致的吧，但想不通为什么会
- 大家是否还记得1983年任天堂的著名游戏《超级玛丽》里那个留着胡子的意大利水管工人，还有日本konami公司1987年发行的射击游戏《魂斗罗
- 搞前端应该对语义化并不陌生，每天都在说语义化，可什么是语义化，语义化究竟能给我们带来什么好处？参加web标准交流会的时候我向各位同学提出了我
- 在Soundbreak我们每天24小时不间断地播放实况音频和视频，所以对于MySQL的新增的复制特性，我们不能做出很令人信服的测试。通过测试
- 【eval()函数】JavaScript有许多小窍门来使编程更加容易。其中之一就是eval()函数，这个函数可以把一个字符串当作一个Java
- detectres.asp<HTML><head><TITLE>asp教程之全能屏幕分辨率侦测</
- 如果备份的数据库有2个文件，分别是.LDF 和 .MDF，打开企业管理器，在实例上右击---所有任务--附加数据库，然后选择那个.MDF文件
- 一、Excel环境配置 服务器端的环境配置从参考资料上看，微软系列的配置应该都行，即：1．Win9x+PWS+Office2．Wi
- Server对象主要是给编程人员提供一些方便的对象和属性。（1）ScriptTimeout属性：<％Server.ScriptTime
- Software as a service 软件即服务，21世纪开始兴起的一种完全创新的软件应用模式。客户通过互联网向厂商定购所需的应用软件
- sql代码如下:CREATE PROCEDURE Proname //使用CREATE PROCED
- 因DWS内核目前支持的线程数很少，个人门户首页打开后，如果并发请求加载的模块数过多，很容易导致DWS崩溃，故而给之前写的AJAX类加了个顺序
- 关于在asp中不使用组件使得脚本sleep的办法还比较少见，可能比较好的办法是创建同步的xmlhttp request，直到获得的时间达到某
- DEMO:var testobj = document.getElementById("test&q
- 图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项
