CSS分栏布局的方法:绝对定位和浮动（2）
来源：风之相随BLOG 发布时间：2009-04-30 13:10:00
标签：css,布局,定位,浮动
但是，我们常用的布局并没有这么简单，除了三栏之外，我们还需要一个页头和一个页脚，如下图：
这时候，再用绝对定位布局就行不通了，因为绝对定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显示在页头的下方。
如果我们一定要采用绝对定位的话，那么必须预先知道这三栏中每一栏的高度，然后再根据其中最高的一栏定位页脚。若是任意一栏中的文本长度无法确定的话，除了使用JavaScript，我们也只能放弃绝对定位的念头，转而投入到浮动布局的怀抱。
2、浮动
浮动的本意是要将插入到文章中的图片向左或者向右浮动，使图片下方的文字自动环绕在它的周围，使图片的左边或者右边不会出现一大块的留白。
浮动的语法虽然简单，但却不那么容易掌握，下面让我们举例说明如何用浮动来进行布局。同样，我们要实现一个带页脚的三栏布局。如下图：
如何用浮动实现这样的效果呢?其实很简单：
1、设定E的宽度，让E居中
2、设定A、B、C的宽度，将A、B、C分别向左浮动
3、给页脚设置clear属性
需要说明的是，浮动布局依然遵循常规文档流，所以与绝对定位相比，浮动定位时HTML源文件中元素声明的位置显得格外重要。 当然，解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序，也有方法不用交换各栏的次序也可以实现同样的布局，但是，这就要用到一种比较晦涩的使用负边距值的方法。一般情况下，人们十有八九会选择交换源文件中左中两栏的声明次序。
0
投稿猜你喜欢
- 我就废话不多说了，大家还是直接看代码吧~def list_dict(list_data): dict_data = {} &nb
- 今天做项目时，有一个这样的需求，需要动态删除的Tab，比如：可以删除某一个，可以删除多个。每一个Tab对应一个iframe。本来我的代码是这
- 虽然用python用了很久了，但是主要还是写一些模型或者算子，对于python中的高级特性用的不多，但是时常阅读大牛的代码或者框架源码，其中
mysql-connector-java与mysql版本的对应我们知道版本更新经常带来的问题就是兼容性问题。在编程过程中版本的错误选择很可能- python中可以使用下标索引来访问列表中的值，对列表进行切片即截取，也可以对列表的数据项进行修改或更新。使用下标索引来访问列表中的值，例如
- 导语嘿！下午好，木子来上新啦~期待今天的内容嘛？挠头.jpg 日常等更新的小可爱们我来了。看看给大家带来了什么好东西💦💦💦💦💦💦💦💦💦💦💦💦
- 装饰器(Decorators)是 Python 的一个重要部分。简单地说：他们是修改其他函数的功能的函数。他们有助于让我们的代码更简短，也更
- 这里用Python逼近函数y = exp(x);同样使用泰勒函数去逼近:exp(x) = 1 + x + (x)^2/(2!) + .. +
- 本文实例讲述了Python有序查找算法之二分法。分享给大家供大家参考，具体如下：二分法是一种快速查找的方法，时间复杂度低，逻辑简单易懂，总的
- 机器A: select instance_name from v$instance; select name from v$database
- 01、介绍在 Golang 语言项目开发中，变量操作不当就会触发空指针引发程序 panic。空指针就是未分配内存的指针类型的变量，变量的值是
- 下面我们来看下,如何利用它来删除一个表中重复记录: If Exists(Select * From tempdb.Information_S
- 前言在实际业务场景中，我们有时候会碰到一些延时的需求：例如，在电商平台，运营在管理后台添加商品后，不需要立刻展示在前台，而是在之后某个时间点
- 作者:peace.zhao 关于 游标 if,for 的例子 create or replace procedure peace_if is
- Fuse.js是什么最近在项目里用到了Fuse.js做模糊查询，便对这个算法起了点好奇心，翻了翻源码。Fuse.js 是一个 JavaScr
- 1.每个客户端连接都会从服务器进程中分到一个属于它的线程。而该连接的相应查询都都会通过该线程处理。2.服务器会缓存线程。因此并不会为每个新连
- 本次分析一下Logger.info的流程1. Logger.info源码: def info(self, msg, *args, **kwa
- 为庆祝jQuery的四周年生日，jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中，jQuery官方团队做了大量的编码、测
- 前言： Socket又称为套接字，它是所有网络通信的基础。网络通信其实就是进程间的通信，Socket主要是使用IP
- 对于日志的处理，有时候需要把符合条件的日志计入数据库中一、添加pom依赖 <dependency> &
