典型的三行二列居中高度自适应css布局
作者:阿捷 来源:w3cn.org 发布时间:2008-02-22 16:02:00
如何使整个页面内容居中,如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子,并详细解释。(本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。)
首先先按这里看实际运行效果,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码:
完整代码
代码分析
首先我们定义body和顶部第一行#header,这里面的关键是body中的
text-align:center;
和header中的
margin-right: auto;margin-left: auto;
,通过这两句使得header居中。注:其实定义text-align:center;就已经在IE中实现居中,但在mozilla中无效,需要设置margin:auto;才可以实现mozilla中的居中。
接下来定义中间的两列#right和#left。为了使中间两列也居中,我们在它们外面嵌套一个层#contain,并对contain设置margin:auto;,这样#right和#left就自然居中了。
注意中间两列定义的顺序,我们首先定义#right,通过
float: right;
让它浮在#contain层的最右边。然后再定义#left,通过
float: left;
让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反(更正:先左后右、还是先右后左都可以实现,根据自己需要设计)。
我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg,这个层是做什么用的呢?这个层就是用来定义#contain的背景的。你肯定会问,为什么不直接在#contain中定义背景,而要多套一层呢?那是因为在#contain中直接定义的背景,在mozilla中将显示不出来,必须定义高度值才可以。如果定义了高度值,#right层就无法实现根据内容的自动伸缩。为了解决背景和高度问题,就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义
float: left;
,因为float使层自动有宽和高的属性。(暂且这么理解:)
最后是定义底部的#footer层。这个定义的关键是:
clear:both;
,这一句话的作用是取消#footer层的浮动继承。否则的话,你会看到#footer紧贴着#header显示,而不是在#right的下面。
主要的层定义完毕,这个布局就ok了。补充一点:你看到我还定义了一个
.text{margin:0px;padding:20px;}
,这个class的作用是使内容的外围有20px的空白。为什么不直接在#right里定义margin或者padding呢,因为mozilla和IE对css盒模型的解释不一致,直接定义margin/padding会造成mozilla里布局变形。我一般采用内部再套一层的做法来解决。
猜你喜欢
- 简单计数器代码如下所示:<% Set fs = CreateObject("Scri
- 曾有位网友遇到这样一个问题:产品名称为“A&T Plastic”,在产品列表中需要做这样的超链接,<a href="
- 在改进SQL Server 7.0系列所实现的安全机制的过程中,Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQ
- 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所以,了解一点字体的基本知识对于
- 为 Web页指定 DOCTYPE 会影响浏览器呈现页的方式。Internet Explorer、Mozilla Firefox 和 Oper
- “你如何为成千上万的用户和页面提供CSS?” 这是Nicole Sullivan在她的在丹佛的Web Directions North 大会
- 在正文前,先简短介绍自己。我任职于广州的某个网站服务公司的系统开发员,主要任务是以.Net编写各种web系统,例如CMS.EIP。大家都知道
- 一、问题描述当用JS调用form的方法submit直接提交form的时候,submit事件不响应。为什么?知道的请回复。类比一下,我用inp
- 在实际的数据库应用中,我们经常遇到这样一个问题,连接到Oracle数据库的用户在作了一次操作后,再也没有后续操作,但却长时间没有和数据库断开
- 在项目开发中,经常出现这样的需求。在新增或修改一个主表数据时,对应的从表也要进行同步,此时我们是怎么操作的了?典型的方法就是对于主表的各数据
- 集群是一种实现高可用性的有效解决方案,有时它会适得其反。而且,它还非常昂贵。因此,数据库管理员可使用日志转移代替集群来提供较高的可用性。日志
- 现在不写asp了这次我将我以前沉淀下的一些函数库共享给大家,希望能给初学者启示,给老手也有所帮助吧.先谢谢大家支持! <%@
- Bit-Packed Data TypesMySQL有一些存储类型使用一个值中的一些单个的比特位来紧凑的存储数据。纯技术上将,不管是底层的存
- Insus.NET解决这个问题,只有创建另外一个表,将存储用户决定要跟踪的表,以及这个表中需要跟踪的字段。 还要创建另外一个表[Audit]
- [root@vm1 ~]# rpm -ivh groundwork-foundation-pro-1.6.1-67.noarch.rpm P
- 两列布局的定宽自适应已经详解了,三列浮动中有两列定宽一列自适应的也详解了,那么该说说三列浮动中两列自适应一列定宽的布局了。中间定宽,左右两侧
- 一、检测它是不是整数function Is_Int(a_str) if&
- 1、前言 MySQL 是完全网络化的跨平台关系型数据库系统,同时是具有客户机/服务器体系结构的分布式数据库管理系统。它具有功能强、使用简便、
- 1。onabort(ns3,ns4,ie4):当用户终止正在打开的网页时产生该事件。2。onblur(ns3,ns4,ie3,ie4):某元
- 网页制作中用到的特效字,你一定是用图象处理软件制作的吧!告诉你,不用图象处理软件,我也能做出漂亮的特效字来,你看,阴影字我就是这样做出来的。