返回
典型的三行二列居中高度自适应布局

典型的三行二列居中高度自适应布局

ID：15431963

大小：60.00 KB

页数：7页

时间：2018-08-03

典型的三行二列居中高度自适应布局_第1页
典型的三行二列居中高度自适应布局_第2页
典型的三行二列居中高度自适应布局_第3页
典型的三行二列居中高度自适应布局_第4页
典型的三行二列居中高度自适应布局_第5页
资源描述：

《典型的三行二列居中高度自适应布局》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、典型的三行二列居中高度自适应布局作者：阿捷2004-7-1821:42:03如何使整个页面内容居中，如何使高度适应内容自动伸缩。这是学习CSS布局最常见的问题。下面就给出一个实际的例子，并详细解释。（本文的经验和是蓝色理想论坛xpoint、guoshuang共同讨论得出的。）首先先按这里看实际运行效果，这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来分析代码：完整代码body{background:#99

2、9;text-align:center;color:#333;font-family:arial,verdana,sans-serif;}#header{width:776px;margin-right:auto;margin-left:auto;padding:0px;background:#EEE;height:60px;text-align:left;}#contain{margin-right:auto;margin-left:auto;width:776px;}#mainbg{width:776p

3、x;padding:0px;background:#60A179;float:left;}#right{float:right;margin:2px0px2px0px;padding:0px;width:574px;background:#ccd2de;text-align:left;}#left{float:left;margin:2px2px0px0px;padding:0px;background:#F2F3F7;width:200px;text-align:left;}#footer{clear:b

4、oth;width:776px;margin-right:auto;margin-left:auto;padding:0px;background:#EEE;height:60px;}.text{margin:0px;padding:20px;}header

right

1

1

5、p>

1

1

1

left
footer代码分析首先我们定义body和顶部第一行#header，这里面的关键是body中的text-align:center;和header中的margin-right:auto;margin-left:auto;，通过这两句使得header

6、居中。注：其实定义text-align:center;就已经在IE中实现居中，但在mozilla中无效，需要设置margin:auto;才可以实现mozilla中的居中。接下来定义中间的两列#right和#left。为了使中间两列也居中，我们在它们外面嵌套一个层#contain，并对contain设置margin:auto;，这样#right和#left就自然居中了。注意中间两列定义的顺序，我们首先定义#right，通过float:right;让它浮在#contain层的最右边。然后再定义#left，通过f

7、loat:left;让它浮动在#right层的左面。这和我们以前表格从左到右定义的顺序正好相反(更正：先左后右、还是先右后左都可以实现，根据自己需要设计)。我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg，这个层是做什么用的呢？这个层就是用来定义#contain的背景的。你肯定会问，为什么不直接在#contain中定义背景，而要多套一层呢？那是因为在#contain中直接定义的背景，在mozilla中将显示不出来，必须定义高度值才可以。如果定义了高度值，#right层就无法实现根据内容

8、的自动伸缩。为了解决背景和高度问题，就必须增加这么一个#mainbg层。窍门在于#mainbh这个层定义float:left;，因为float使层自动有宽和高的属性。(暂且这么理解：)最后是定义底部的#footer层。这个定义的关键是：clear:both;，这一句话的作用是取消#footer层的浮动继承。否则的话，你会看到#footer紧贴着#header显示，而不是在#right的下面。主要的层定义完毕，这个

当前文档最多预览五页，下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页，下载文档查看全文
温馨提示：
1. 部分包含数学公式或PPT动画的文件，查看预览时可能会显示错乱或异常，文件下载后无此问题，请放心下载。
2. 本文档由用户上传，版权归属用户，天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容，确认文档内容符合您的需求后进行下载，若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误，付费完成后未能成功下载的用户请联系客服处理。