九宫格基本布局（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
投稿猜你喜欢
- 本文实例讲述了Python操作word常见方法。分享给大家供大家参考，具体如下：这里介绍两种方式:使用win32com使用docx1. 使用
前言：大家跟我一起念，Python * 好，跟着本宝宝用Python抢火车票首先我们需要splinter安装：pip install spli- python-tkinter 实现各种个样的撩妹鼠标拖尾，效果图展示：系统的拖尾已经无法满足我们了，女朋友叫你把鼠标拖尾换成她的照片，让你时
- map()函数map() 会根据提供的函数对指定序列做映射，是内置函数第一个参数 function 以参数序列中的每一个元素调用 funct
- (一)连接连接通常来自Web服务器，下面列出了一些与连接有关的参数，以及该如何设置它们。1、max_connections这是Web服务器允
- 一、索引的优劣势优点：可以快速的检索 、可以加快分组和排序缺点： 占用储存空间、降低数据表的修改操作二、索引的分类主键索引即主索
- 目录1.字典字典的相关操作获取字典的长度2.集合1.字典字典是python中的一种数据结构。它的内容由**键-值(key-value)**的
- 我最近在涉及大量数据处理的项目中频繁使用 sqlite3。我最初的尝试根本不涉及任何数据库，所有的数据都将保存在内存中，包括字典查找、迭代和
- 所谓取模运算，就是计算两个数相除之后的余数，符号是％。如a ％ b就是计算a除以b的余数。用数学语言来描述，就是如果存在整数n和m，其中0
- 前言2015年，HTTP/2 发布，直到2021年公司的项目才开始在实践中应用；自己对http2诸多特点的理解只存在于字面上，于是尝试在no
- 虚拟环境管理今天聊聊Python中虚拟环境的价值和常用命令。为什么会有虚拟环境？在实际项目开发中，我们通常会根据自己的需求去下载各种相应的框
- 原理介绍keras是一种基于模块的高级深度学习开发框架，它并没有仅依赖于某一种高速底层张量库，而是对各种底层张量库进行高层模块封装，让底层库
- #coding:utf-8 #批量修改文件名 import os import re import datetime re_st = r&#
- 引言在学习mysql时，我们经常会使用explain来查看sql查询的索引等优化手段的使用情况。在使用explain时，我们可以观察到，ex
- pathlib 模块提供了表示文件系统路径的类，可适用于不同的操作系统。使用 pathlib 模块，相比于 os 模块可以写出更简洁，易读的
- 背景公司一个golang的项目，使用到了公司的私有仓库，去执行go mod tidy（下载依赖）的时候，到download公司私有库的时候就
- 前言康威生命游戏设计并不难，我的思路就是借助pygame进行外观的展示，最近一段时间的游戏项目都是使用pygame进行的，做起来比较顺利。内
- 一、pycharm配置1、部署配置工具==》部署==》配置2、python解释器文件==》设置==》项目：xx==》python解释器3、运
- 有一个群友在群里问个如何快速搭建一个搜索引擎，在搜索之后我看到了这个代码所在Git:https://github.com/asciimoo/
- 本实验中分别针对空库、脱机、联机三种方式，配置一主两从的mysql标准异步复制。只做整服务器级别的复制，不考虑对个别库表或使用过滤复制的情况
