CSS分栏布局的方法:绝对定位和浮动
来源：风之相随BLOG 发布时间：2009-04-30 13:10:00
在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning)，它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。第二种则是使用CSS中的浮动(float)概念。
绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。
1、绝对定位
绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有什么需要猜测或者运气的成分。由于应用了绝对定位的元素被不留痕迹地从常规文档流中完全移除，所以它也不会为其他元素带来任何的影响。
那么让我们试一试用绝对定位如何实现下面的布局。
这是一个三栏的布局，并且是居中显示的。其中，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，我们不可能直接用绝对定位将A、B、C三栏定位到居中的位置，因为每个人显示器的分辨率是不同的，在1024X768分辨率的显示器上定位的居中效果，在别的分辨率的显示器上看到的效果肯定不会是居中显示的，那么，该如何解决这个问题呢?
幸好，在绝对定位模型中有个极为有用的特性，那就是：若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html(也就是浏览器窗口的左上角)计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。
所以，利用这个特性，我们给A、B、C栏的外部加上一个容器D，如下图：
然后，我们让容器D居中，并给它加上一个属性：position:relative，这样，再用绝对定位定位A、B、C的top和left值，A、B、C的位置就会基于容器D的左上角的位置来计算了，这样就可以实现我们期望的三栏居中的效果了。
0
投稿猜你喜欢
- 数据库是数据的集合，与数学的集合论有密不可分的关系。为提高查询速度，我们可以：对数据表添加索引，以加快搜索速度;通过编程技巧最大限度地利用索
- 将有安全问题的SQL过程删除，比较全面.一切为了安全!删除了调用shell，注册表，COM组件的破坏权限use master&nb
- 俗话说，“工欲善其事，必先利其器”。对于前端开发工程师来说，基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- 在一个update和insert操作频繁的表中，少量数据测试的时候运行良好，在实际运营中，因数据量比较大（21万条记录），会出现死锁现象，用
- 注：本文所说的视觉设计师专指网页视觉设计师。网页设计师与平面设计师都归类为设计师，其实这两个职业是跨行业的，虽然有很多设计师一直在跨行业工作
- 1.首先，我们需要过滤所有客户端提交的内容,其中包括?id=N一类,另外还有提交的html代码中的操作数据库的select及asp文件操作语
- “你不必严格遵守这些原则，违背它们也不会被处以宗教刑罚。但你应当把这些原则看成警铃，若违背了其中的一条，那么警铃就会响起
master库对于SQLServer来说，是很重要的系统数据库，保存着所有Sqlserver的用户信息、数据库信息等，当数据库崩溃时，mas- SQL Server 2005的新功能为动态管理对象，它们是在指定时间返回某个数据库实例的特殊状态信息的数据库视图或函数。这些对象允许数据库
- hao123的成功引领了一批的网址站，然而辉煌却是很难复制的，复制了模式却复制不了成功，市场一旦被垄断就很难再超越。网址站的成功也在一定程度
- 根据google最新的算法规则:用户行为模式的重视程度越来越高，这也就要求网页设计的时候应注意“合理的网页结构”，SEO业界也有个共识“网页
- 我在Web服务器端安装了Web Server IIS4.0、Oracle Net8 for Client，并创建好了和Oracle8数据库的
- 方法一 <％dim total(7,3) total(1,0)="ASP之家"&n
- 如何在Access数据库中立即得到所插入记录的自动编号？首先，我们要保证获得记录集的方式支持bookmark属性，如在1、3插入一条有自动编
- SHA (Secure Hash Algorithm，译作安全散列算法) 是美国国家安全局 (NSA) 设计，美国国家标准与技术研
- 在Flash中使用ASP需要的条件：1。你的ISP的server必须支持Active Server Pages并且最好支持数据库2。你应该要
- 不知道从什么时候开始，在网络上到处可以看到div+css，到底什么是div+css呢？难道就是传说中的标准重构吗？标准从最简单的根源来说不是
- 当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们，就能写出越好的CSS规则！在这些简单的”秘
- 内容摘要： Request和Response这两个对象是ASP所提供的内置对象中最常用的两个。在浏览器（或其他用户代理）和Web服
- 1.建表代码如下:-- Create table create table test ( dm1 char(3), dm2 char(3),
