HTML结构:
<div class='contain'>
<div class='left'>111</div>
<div class='right'>111</div>
<div class='mid'>111</div>
</div>
1 . 利用flexbox
.contain{
display:flex;
}
.left{
float:left;
width:100px;
background:red;
}
.right{
float:right;
width:100px;
background:yellow;
}
.mid{
flex:1;
background:green;
}
2 . 利用float和absolute
.contain{
position:relative;
}
.left{
float:left;
width:100px;
background:red;
}
.right{
float:right;
width:100px;
background:yellow;
}
.mid{
position:absolute;
left:100px;
right:100px;
background:green;
}
3 . 利用float和overflow形成BFC
<div>
<div class='left'>111</div>
<div class='right'>111</div>
<div class='mid'>111</div>
</div>
.left{
float:left;
width:100px;
background:red;
}
.right{
float:right;
width:100px;
background:yellow;
}
.mid{
background:green;
overflow:hidden;
}
利用overflow时中间元素必须放到最后