典型的三行二列居中高度自适应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里布局变形。我一般采用内部再套一层的做法来解决。
猜你喜欢
- 系列目录:1. 服务器XMLHTTP(Server XMLHTTP in ASP)基础2. 
- 一、前言首先说,Python中一切皆对象,老生常谈。还有,Python提供了许多特殊方法、元类等等这样的“元编程”机制。像给对象动态添加属性
- Python语法基础01-Python快速入门U1-定义变量直接定义 不用指明变量类型e.g:a=10U2-判断语句#coding=utf-
- 阅读上一篇:W3C优质网页小贴士(三)明智地选择 URI没有什么比走到你最喜欢的商店门口,却发现店门紧闭,而且没有看见店面搬迁告示这种事情还
- Online人们搜索、浏览、阅读、跟帖、互动投票,玩游戏,甚至在线买卖交易。这些行为都是“用户体验”,听起来用户体验似乎无所不能,造成了互联
- 最近在做一个项目,用双通道神经网络,每个通道输入不同数据训练,具有相同label。开始没想到如何实现,网上很多例子都是单通道,即便找到双通道
- 简介黑洞图像大家都知道,毕竟前几年刚发布的时候曾火遍全网,甚至都做成表情包了。问题在于,凭什么认为这就是黑洞的照片,而不是一个甜甜圈啥的给整
- 简介:with是从Python2.5引入的一个新的语法,它是一种上下文管理协议,目的在于从流程图中把 try,except 和finally
- 代码如下:<% '/* 函数名称:Zxj_ReplaceHtmlClearHtml '/
- 为什么能实现在线编辑呢? 首先需要ie 的支持,在 ie 5.5以后就有一个编辑状态,就是利用这个编辑状态,然后用javascript 来控
- 工作中我们经常需要判断某个变量/属性是否为undefined。通常有两种写法// 方式1 typeof age === 'undef
- 前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章,现在还有一点
- js模拟随机抽奖程序代码!相关文章推荐:随机6+1选号码摇奖程序 <html><title>模拟抽奖-asp之家&l
- 我就废话不多说了,直接上代码吧!def _int_iter(): """根据回文数的定义。首先生成
- 1、保存整个网络结构信息和模型参数信息:torch.save(model_object, './model.pth')直接加
- 在框架选择上,不少人会觉得swoft才是最强PHP框架,尤其是在常驻内存模式的应用级高性能框架,性能是这一堆页面级框架遥不可及的,但是使用上
- 1.下载PyQt官方网站:http://www.riverbankcomputing.com/software/pyqt/download5
- 几周前, Elastic Beanstalk声明在AWS云中配置和管理Docker容器。在本文中,我们通过一个简单的注册表单页面应用去理解D
- Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0。zfill()方法语法:str.zfill(width)参
- 不同类型的语言支持不同的数据类型,比如 Go 有 int32、int64、uint32、uint64 等不同的数据类型,这些类型占用的字节大