A-A+

八、两列固定宽度居中与高度自适应

2007年11月14日 网站运维 暂无评论 阅读 3,159 views 次

要实现两列固定宽度居中的布局,其实很简单,在第四节及第六节教程中已经提到,我们只要把两个固定列丢在一个div对象中去,实现嵌套就可以了,修改后的码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <style type="text/css">
  6. <!--
  7. #layout{margin:0px auto;width:304px;}
  8. #left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <div id="layout">
  14. <div id="left">我是layout对象下的左栏</div>
  15. <div id="right">我是layout对象下的左栏</div>
  16. </div>
  17. </body>
  18. </html>

如下图上所示:

在很多情况下我们讨论对象横向排列的次数比较多,包括宽度的自适应。但有些时候也会用到高度的自适应问题,其实在实现高度自适应的过程中,往往会遇到很多不正常的现象,这与浏览器的解析有关,我们直接看如下css代码:

CSS代码
  1. html,body{margin:0px;height:100%;}
  2. #layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}

如上图下部分看实现效果!

注意:问题的关键在于第一句代码:

CSS代码
  1. html,body{margin:0px;height:100%;}

我们同时设定了html和body的高度均为100%,这是实现高度自适应的关键。一个对象的高度可以用百分比来显示,但要取决于它的父对象的高度而#layout放在了body中,只有我们对其父对象设置了100%的高度时,子对象的相对高度才生效。
单独为body设置了100%的高度,在IE下可以实现高度自适应,但在Firefox下仍不能实现,所以也为html设置了100%的高度。这是浏览器解析的问题,加上这一句为的就是能让其在两个浏览器下都正常显示。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=113

给我留言

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

Copyright © 寂寞部屋 保留所有权利.   Theme  Ality

用户登录