HTML代码
<div class="wrap">
<div class="left">左边固定</div>
<div class="content">中间自适应</div>
<div class="right">右边固定</div>
</div>
CSS代码
第一种 定位;
*{
margin: 0 ;padding: 0;
}
.wrap{
position: absolute;
height: 100%;
width: 100%;
}
.left, .right,.content{
height: 200px;width: 100px;
position: absolute;
}
.left{
background: antiquewhite;
left: 0;
}
.right{
background: pink;
right: 0;
}
.content{
background: #f00;
left: 100px;
right: 100px;
width: auto;
text-align: center;
}
第二种 浮动
浮动时候,right部门放在content左边
*{
margin: 0 ;padding: 0;
}
.left, .right,.content{
height: 200px;width: 100px;
}
.left{
background: antiquewhite;
float: left;
}
.right{
background: pink;
float: right;
}
.content{
background: #f00;
text-align: center;
width:auto ;
overflow: auto;
}
第三种Flex布局;
*{
margin: 0 ;padding: 0;
}
.left, .right,.content{
height: 200px;width: 100px;
}
.left{
background: antiquewhite;
}
.right{
background: pink;
}
.content{
background: #f00;
text-align: center;
flex: 1;
}
.wrap{
display: flex;
}
第四种 grid布局
*{
margin: 0 ;padding: 0;
}
.left, .right,.content{
height: 200px;
}
.left{
background: antiquewhite;
}
.right{
background: pink;
}
.content{
background: #f00;
text-align: center;
}
.wrap{
display: grid;
grid-template-columns:100px auto 100px
}
第五种 table-cell表格布局
*{
margin: 0 ;padding: 0;
}
.left, .right,.content{
height: 200px;
display: table-cell;
width: 100px;
}
.left{
background: antiquewhite;
}
.right{
background: pink;
}
.content{
background: #f00;
text-align: center;
width: auto;
}
.wrap{
display: table;
width: 100%;
}