左右定宽,中间自适应,实现三列布局
今天想说的是一个左右定宽,中间自适应,实现三列布局,我也总结了以下,主要有以下几种:
废话不多说,直接上代码:
第一种:float
<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>
//css
#left{
float: left;
background-color: red;
width: 150px;
height: 50px;
}
#right {
float: right;
background-color: yellow;
width: 200px;
height: 50px;
}
#middle {
margin: 0 200px 0 150px;
width: 100%;
background-color: #fff9ca;
height: 50px;
}
第二种:BFC
<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>
//css
#left {
background-color: red;
width: 150px;
height: 50px;
float: left;
}
#right {
background-color: yellow;
width: 200px;
height: 50px;
float: right;
}
#middle {
background-color: #fff9ca;
height: 50px;
overflow: hidden;
}
第三种:双飞翼布局
<!--html-->
<div class="grid">
<div id="middle">
<div id="middle-span"><span>middle</span></div>
</div>
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
</div>
//css
#middle {
float: left;
background-color: #fff9ca;
width: 100%;
height: 50px;
}
#middle-span {
margin: 0 200px 0 150px;
}
#left {
float: left;
position: relative;
background-color: red;
width: 150px;
margin-left: -100%;
height: 50px;
}
#right {
float: left;
position: relative;
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 50px;
}
第四种:flex
<!--html-->
<div class="flex">
<div id="left"><span>left</span></div>
<div id="middle"><span>middle</span></div>
<div id="right"><span>right</span></div>
</div>
//css
.flex {
display: flex;
flex-flow: row;
}
#left {
background-color: red;
width: 150px;
height: 50px;
}
#middle {
background-color: #fff9ca;
flex: 1; /* flex中宽度自适应使用该属性,使用100%时其他列的固定宽度会出现问题*/
height: 50px;
}
#right {
background-color: yellow;
width: 200px;
height: 50px;
}