<html>
<head>
<title>左右布局，自适应宽高</title>
<meta charset="utf-8"/>
<style>
.wrapper {
background: #999;
}
.left {
width:300px;
float:left;
background: #ccc;
}
.right {
margin:0 0 0 310px;
background: #f1f1f1;
}
.clearfix:after {
content:"";
display: block;
visibility: hidden;
clear:both;
height: 0;
}
.clear {clear:both;}
.footer {
height: 90px;
background: #9bffdd;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="left">left<br/>left<br/>left<br/>left<br/></div>
<div class="right">right<br/>right<br/>right<br/>right<br/>right<br/></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
测试环境：ie6-ie10，firefox，chrome。效果如下图：
5463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
