最近面試的時候遇到一個提問說，如何做到一個左右寬度固定，中間自適應(yīng)的布局，我的答案不重要，重要的是不是面試官想聽到的答案，這樣問大概率他想聽到的答案一定是雙飛翼布局，所以今天就手敲一個雙飛翼布局讓大家搞明白。
- 首先我們有三個盒子div，分別是
center、left、right
<div class="container">
<div class="center">中間</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
- 然后我們給三個div設(shè)置寬高和背景色，方便我們看,中間要自適應(yīng)，所以寬度為100%
.center {
background-color: pink;
width: 100%;
height: 100vh;
}
.left {
background-color: red;
width: 200px;
height: 100vh;
}
.right {
background-color: blue;
width: 200px;
height: 100vh;
}
- 我們?yōu)榱俗?code>三個div在
同一行，所以設(shè)置container下的三個div都浮動布局
.container div{
float: left;
}
此時效果是這樣的，左右兩個div是被擠下去
文章來源：http://www.zghlxwxcb.cn/news/detail-705698.html
- 我們通過
margin-left值把左右兩個div給定位到一行，左邊-100%，右邊div寬度是多少，就負的多少px
.left {
background-color: red;
width: 200px;
height: 10vh;
margin-left: -100%;
}
.right {
background-color: blue;
width: 200px;
height: 10vh;
margin-left: -200px;
}
就這樣了，拜~文章來源地址http://www.zghlxwxcb.cn/news/detail-705698.html
到了這里，關(guān)于css 左右寬固定，中間自適應(yīng)——雙飛翼布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
