第一种方式,利用流布局(注意div的顺序):
(注:代码只写关键部分)
两列布局,左侧固定,右侧自适应
*{
margin:0;
padding:0;
}
.left{
background:red;
float:left;
width:200px;
}
.right{
background:green;
margin-left:200px;
}
<div class = "left">left</div>
<div class = "right">right</div>
两列布局,右侧固定,左侧自适应
*{
margin:0;
padding:0;
}
.left{
background:red;
margin-right:200px;
}
.right{
background:green;
float:right;
width:200px;
}
<div class = "left">left</div>
两列布局,左右固定,中间自适应
*{
margin:0;
padding:0;
}
.left{
background:red;
float:left;
width:200px;
}
.right{
background:green;
float:right;
width:200px;
}
<div class = "left">left</div>
<div class = "right">right</div>
<div class = "center">center</div>
第二种方式,使用100%、负边距:
两列布局,左侧固定,右侧自适应
*{
margin:0;
padding:0;
}
.left{
background:red;
float:left;
margin-right:-100%;
width:200px;
}
.right{
background:green;
/*解决ie6双边距bug*/
float:left;
margin-left:200px;
width:100%;
}
<div class = "left">left2</div>
<div class = "right">right2</div>
两列布局,右侧固定,左侧自适应
.left3{background:red;
float:left;
width:100%;
margin-right:-200px;
}
.right3{
background:green;
float:right;
width:200px;
}
<div class = "left">left2</div>
<div class = "right">right2</div>
两列布局,左右固定,中间自适应
*{padding:0;
margin:0;
}
.center{
background:yellow;
float:left;
width:100%;
}
.inner{
margin:0 200px;
}
.left{
background:green;
float:left;
margin-left:-100%;
width:200px;
}
.right{
background:red;
float:left;
margin-left:-200px;
width:200px;
}
<div class = "center">
<div class = "inner">
center
</div>
</div>
<div class = "left">left</div>
<div class = "right">right</div>
绝对定位:
*{
padding:0;
margin:0;
}
html,body{
margin:0;
height:100%;
}
.left{
position:absolute;
top:0;
width:200px;
height:100%;
left:0;
background:red;
}
.right{
position:absolute;
top:0;
width:200px;
height:100%;
right:0;
background:green;
}
.main{
margin:0 210px;
background:blue;
height:100%;
}
</style>
</head>
<body>
<div class = "left"></div>
<div class = "main">dsd</div>
<div class = "right"></div>
</body>