两栏布局
左边固定右边自适应
- 使用float布局
/*HTML*/
<div class="left">我是左边</div>
<div class="right">我是右边</div>
/*CSS*/
.left{
float: left;
width: 200px;
background-color: #0074D9;
}
.right{
margin-left: 200px;
background-color: #954121;
}
- 使用position布局
/*HTML*/
<div class="left">我是左边</div>
<div class="right">我是右边</div>
/*CSS*/
.left{
position: absolute;
left: 0;
width: 200px;
background-color: #0074D9;
}
.right{
margin-left: 200px;
background-color: #954121;
}
三栏布局
左右两边固定中间自适应
- 使用flex布局
/*HTML*/
<div class="wrap">
<div class="left">我是左边</div>
<div class="middle">我是中间</div>
<div class="right">我是右边</div>
</div>
/*CSS*/
.wrap{
display: flex;
}
.middle{
width: 100%;
background-color: #7f7f7f;
}
.left{
width: 200px;
background-color: #0074D9;
}
.right{
width: 200px;
background-color: #954121;
}
- 使用position/float+margin进行布局
/*HTML*/
<div class="left">我是左边</div>
<div class="middle">我是中间</div>
<div class="right">我是右边</div>
/*CSS*/
.middle{
margin: 0 200px;
background-color: #7f7f7f
}
.left{
width: 200px;
background-color: #0074D9;
float: left;
/*
position:absolute;
left:0;
*/
}
.right{
width: 200px;
background-color: #954121;
float: right;
/*
position:absolute;
right:0;
*/
}
- 圣杯布局(position+float+margin负值)
/*HTML*/
<div class="wrap">
<div class="middle">我是中间</div>
<div class="left">我是左边</div>
<div class="right">我是右边</div>
</div>
/*CSS*/
.wrap > div{
float: left;
}
.wrap{
padding: 0 200px;
}
.middle {
width: 100%;
background-color: #7f7f7f
}
.left {
width: 200px;
background-color: #0074D9;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
background-color: #954121;
margin-left: -200px;
position: relative;
right: -200px;
}
- 双飞翼布局(margin+float)
/*HTML*/
<div class="wrap">
<div class="middle">我是中间</div>
</div>
<div class="left">我是左边</div>
<div class="right">我是右边</div>
/*CSS*/
.wrap {
width: 100%;
float: left;
}
.middle {
background-color: #7f7f7f;
margin: 0 200px;
}
.left {
float: left;
width: 200px;
background-color: #0074D9;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
background-color: #954121;
margin-left: -200px;
}