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

首页 > 网站建设 > 八、两列固定宽度居中与高度自适应

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

2007年11月14日网站建设 912 views

评论发表评论

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

XML/HTML代码

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
<style type=“text/css”>
<!–
#layout{margin:0px auto;width:304px;}
#left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
–>
</style>
</head>
<body>
<div id=“layout”>
<div id=“left”>我是layout对象下的左栏</div>
<div id=“right”>我是layout对象下的左栏</div>
</div>
</body>
</html>

如下图上所示：

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

CSS代码

html,body{margin:0px;height:100%;}
#layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}

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

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

CSS代码

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

作者：Johnny
原文链接：八、两列固定宽度居中与高度自适应

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自寂寞部屋