经典的一侧定宽、另一侧自动扩展的布局如何设计
</pre><pre class="html" name="code"> <style>
#content{position:relative;}
#left{width:200px;background:red;height:500px;position:absolute;}
#right{background:green;height:500px;margin-left:200px;}
</style>
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
</div>
//这种方式,在IE6下,两个div之间会有3px的空隙
<style>
#left{width:200px;background:red;height:500px;float:left;}
#right{background:green;height:500px;margin-left:200px;}
</style>
<div id="content">
<div id="left">
</div>
<div id="right">
</div>
</div>
等高布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{
width:300px;
margin:1 auto;
border:5px solid #000;
overflow:hidden;
}
.container:after{
content:"";
display:block;
clear:both;
}
.left{
width:100px;
background:red;
float:left;
padding-bottom:1000px;
margin-bottom:-1000px;
}
.right{
width:100px;
background:green;
float:right;
padding-bottom:1000px;
margin-bottom:-1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>