Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>两栏自适应布局</title>
</head> 
<body>
<div class="wapper ">
  <div class="left">left</div>
    <div class="right">
    <span>不仅内容区没有排在右侧,而且遭遇了双边距bug。双边距bug非本文重点讨论,直接为.pic增加display:inline来解决。我们关心的是为什么IE6下右侧内容元素还是不能决定自己的布局呢?这里涉及到了另一个概念HasLayout。其实,在完美世界的字典里,是没有HasLayout这个概念的。它是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙元素的布局。为数不多的元素默认这个属性值为true,包括:</span>
    </div>
</div>
</body>
</html>
 
*{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*/}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ihqn19pro
0viewers