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
投稿猜你喜欢
最近在学习python的内容，在导入requsets库的时候遇到了问题。import requests查了一下资料是requests库需要安- 创建一个SpringBoot项目其他不赘叙了，引入MyBaties、MySql依赖创建mysql表CREATE TABLE sp_users
- queue和pipe的区别： pipe用来在两个进程间通信。queue用来在多个进程间实现通信。 此两种方法为所有系统多进程通信的基本方法，
- 今天不小心又点了收藏夹里Google的新首页风格的地址，赫然发现又变了！从这个页面上线以来，偶尔会去看看，短短一年的时间，已经变换了至少三次
- 数据加载分为加载torchvision.datasets中的数据集以及加载自己使用的数据集两种情况。torchvision.datasets
- 本文实例讲述了python判断给定的字符串是否是有效日期的方法。分享给大家供大家参考。具体分析如下：这里python判断给定的字符串是否是一
- ThinkPHP支持多种php模板引擎，可以根据个人需要加以配置。下面我们以Smarty模板引擎为例，给大家说说具体的操作流程！首先去Sma
- 引言阿刁是一个自动化测试用例，从一出生他就被赋予终生使命，去测试一个叫登录的过程是否合理。他一直就被关在一个小黑屋里面，从来也没有出去过，小
- 今天接到一个小需求，就是想在windows环境下，上传压缩文件到linux指定的目录位置并且解压出来，然后我想了一下，这个可以用python
- PDOStatement::rowCountPDOStatement::rowCount — 返回受上一个 SQL 语句影响的行数(PHP
- 前提1. Cookie 是脆弱的。cookie 容易被窃取和受到垮站脚本的攻击，我们必须接受 cookie 是不安全的。2. 持久化登录 c
- 问题描述在我们做项目中，常见的是横向表格，但是偶尔的需求，也会做竖向的表格。比如下图这样的竖向表格：我们看到这样的效果图，第一时间想到的是使
- 最近在学习MySQL优化方面的知识。本文就数据类型和schema方面的优化进行介绍。1. 选择优化的数据类型MySQL支持的数据类型有很多，
- 1.装饰器通用模型def wrapper(fn): def inner(*args, **kwargs):&nbs
- 如何获取指定元素在想要获取元素上添加“ref” ref="scroll&quo
- 问题描述我自己根据edgelist计算的邻接矩阵，与调用networkx.adjacency_matrix(g)返回的结果不一样，经过调试发
- 想当初，考研的时候要是知道有这么个好东西，计算定积分。。。开玩笑，那时候计算定积分根本没有这么简单的。但这确实给我打开了一种思路，用编程语言
- Python是一门清晰简洁的语言，如果你对一些细节不了解的话，就会掉入到那些深不见底的“坑”里，下面，我就来总结一些Python里常见的坑。
- Git的使用基本教程git安装官网 msysgit.github.io(百度搜索git下载地址也行)下载git安装(路径选择你的路径或者默认
- 前言笔者用的是mac开发，但是mac自带的php功能安装十分不方便，并且和线上的linux开发环境不一致。在没有用docker之前一直用va
