聖盃佈局、雙飛翼佈局,本質上都是三欄佈局──中間自適應兩邊固定寬。有一次面試,要求寫出三種實現方式,結果只寫出了兩種,面試官說基礎還不夠紮實~嗚
聖盃佈局
聖盃HTML結構:
<div class='main'>
<div class="middle">中間的</div>
<div class="left">左邊的</div>
<div class="right">右邊的</div>
</div>
雙飛翼佈局
雙飛翼HTML結構爲:
<div class='main'>
<div class="middle">
<div class="inner_middle">中間的</div>
</div>
<div class="left">左邊的</div>
<div class="right">右邊的</div>
</div>
一、float+margin
<style type="text/css">
.main{
overflow: hidden;
background: #eee;
}
.left{
background: red;
width: 200px;
height: 280px;
float: left;
}
.right{
background: blue;
width: 200px;
height: 290px;
float: right;
}
.middle{
background: green;
height: 300px;
margin-left: 200px;
margin-right: 200px;
}
</style>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
說明:網上還有人用padding替換margin的方法,感興趣的自己去查。
二、Position
<style type="text/css">
.main{
position: relative;
}
.left{
background: red;
height: 300px;
width: 200px;
position: absolute;
left: 0;
top: 0;
}
.right{
background: blue;
height: 300px;
width: 200px;
position: absolute;
right: 0;
top: 0;
}
.middle{
background: green;
height: 300px;
width: 100%;
}
</style>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="middle"></div>
</div>
說明:網上有人提到這個方法在某些情況下會出現bug,具體沒有深入瞭解過。
三、Flex
<style type="text/css">
.main{
display: flex;
align-items: center;
}
.left{
background: red;
width: 200px;
height: 300px;
}
.right{
background: blue;
width: 200px;
height: 300px;
}
.middle{
background: green;
height: 300px;
width: 100%;
}
</style>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
說明:低版本的瀏覽器有兼容的問題,在網上也看到有人用order控制位置
四、Grid
<style type="text/css">
.main{
display: grid;
height: 300px;
}
.left{
background: red;
grid-row:1;
grid-column:1/2;
}
.right{
background: blue;
grid-row:1;
grid-column:4/5;
}
.middle{
background: green;
grid-row:1;
grid-column:2/4;
}
</style>
<div class="main">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
說明:grid-column一共分爲5個格,“grid-column:1/2”佔了第一個和第二個格,不是指佔了二分之一。這個方法兼容性有比較大的問題,網上有不少文章提到瀏覽器還沒有提供支持,實際上新版主流瀏覽器已經支持了。