您的位置：首页 > 其它

两栏自适应布局

2013-06-21 11:47 246 查看
其间用到的是：

1.右左两栏自适应高度：

　　如，左边需要以右边的高度为准，即"去适应"它，则设置左边padding-bottom:1000px; margin-bottom:-1000px;

　　如，右边需要以左边的高度为准，与上条同理

　　如，两栏都搞不清楚以谁为基准，可以两个都添加padding-bottom:1000px; margin-bottom:-1000px;

　　注：无论怎么，父亲标签都要设置overflow:hidden; 原因：我不知道

2.左栏固定，右栏自适应宽度

　　其实应该就是触发两个元素的bfc？使之成为独立可操控的个体。但是在ie6中要设置margin-left:左边栏的宽度。用height:1%;还是会出现3px。

我是美美demo.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>两栏自适应布局</title>
<style>
*{margin:0;padding:0}
.wapper{ width:100%; overflow:hidden; }
.left{width:80px;background:#666; float:left; padding-bottom:1000px; margin-bottom:-1000px;}
.right{background:#999;overflow:hidden;/*触发bfc，使之成为个体*/ _margin-left:80px;/*如果不设置这一句，在ie67下会出现3px*/}
</style>

</head>
<body>
<div class="wapper ">
<div class="left">left</div>
<div class="right">
不仅内容区没有排在右侧，而且遭遇了双边距bug。双边距bug非本文重点讨论，直接为.pic增加display:inline来解决。我们关心的是为什么IE6下右侧内容元素还是不能决定自己的布局呢？这里涉及到了另一个概念HasLayout。其实，在完美世界的字典里，是没有HasLayout这个概念的。它是IE浏览器引擎内部特有的属性，它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时，这个元素才可以决定自己和其子孙元素的布局。为数不多的元素默认这个属性值为true，包括：
</div>
</div>
</body>
</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航