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
投稿
猜你喜欢
- FileSystemObject、Folder 和 File 对象的一些方法都与通过 TextStream 对象创建、读取或写入文件有关。虽
- 最近没事,写了个在项目经常要取城市或省份名的方法,所以改成了一个类.方便以后调用//****************************
- 很久没有发表文章了,最近一直在研究产品设计标准的问题,之前有发过一篇关于 Axure的教程 ,相信很多人已经学会如何使用,这次我给大家介绍一
- <% dim week_ymd(8) '测出可以手动设定日期,比如this_ymd=#2008-04-1
- 1) 用正式表达式 regexp "[u0391-uFFE5]"2) 用length和char_lengthdrop t
- 在Flash中使用ASP需要的条件:1。你的ISP的server必须支持Active Server Pages并且最好支持数据库2。你应该要
- 即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时的
- 一,啥是Block Formatting Context当涉及到可视化布局的时候,Block Formatting Context提供了一个
- IE 开发团队更改了 IE8 的 User-agent ,更改的部分信息如下:IE8 on Windows Vista (Compatibi
- 1. 查看数据库的版本select @@version2.查看数据库所在机器操作系统参数exec master..xp_msver3. 查看
- 我设了两个SESSION:SESSION(A1),SESSION(A2),然后我现在想结束其中一个SESSION(如:ESEEION(A1)
- 注:本文是应Alan邀请为《CSS布局实录》写的一个web标准入门指导。书已经上市近一年了,现在摘选出来,给初学者一个参考。希望了解更多实现
- asp中利用XMLhttp对象获取远程的数据,然后用二进制输出到客户浏览器,让客户下载数据,此例从某一远程服务器获取一个压缩包,并且输出到浏
- 前端技术层(图片有点偏激,仅供参考)Javascript和DOM关系很暧昧,弄不明白!CSS和HTML
- 缓存是基于Application实现的CacheState类,建议实例化时用名Cache程序代码<% Class Cache
- 在开发C/S结构的大型数据库应用软件时,一般情况下,软件开发人员和数据库设计人员并不是同一个人,这就需要协商好一些即可由程序设
- 本期薯片会的目的是讨论人物角色在设计中如何应用的问题。围绕了以下几个问题开展了讨论:1、 角色能干什么?2、 包含哪
- 内容摘要:本文介绍了使用js来实现下拉伸缩导航菜单的功能,并带有渐显的效果,值得收藏。正好这几天公司不忙,学校又没有事情,所以想抽空架一个个
- PJBLOG3的相关日志,现在网上好像还没有谁有相关的修改说明吧,反正升级之后,正好有必要,也就写了个,在这里也给大家共享共享。当前相关日志
- 如何编写具有良好结构的CSS?如果在设计流程中缺乏"秩序"或"章法"是非常不利的,你得冒着风险去添加