css多種方式實現(xiàn)雙飛翼布局
發(fā)布時間：2018-09-10 15:42:37 作者：heath_learning 
我要評論
我要評論這篇文章主要介紹了css多種方式實現(xiàn)雙飛翼布局的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
圣杯布局、雙飛翼布局效果圖
從效果圖來看圣杯布局、雙飛翼布局效果是一樣一樣的。
圣杯布局、雙飛翼布局就是左右兩側(cè)寬度固定，中間內(nèi)容寬度自適應(yīng)，即100%
圣杯布局
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: relative;
/* 2、將.left再次拉到最左邊，否則.main的左側(cè)會有200px的空白 */
left: -200px;
float: left;
width: 200px;
min-height: 300px;
/* 1、將.left拉到最左邊，原來.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
position: relative;
/* 2、將.right再次拉到最右邊，否則.main的右側(cè)會有200px的空白 */
right: -200px;
float: left;
width: 200px;
/*/1、將.right拉到最右邊，原來.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
</style>
<div class="header">header</div>
<div class="container clearfix">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
浮動實現(xiàn)雙飛翼布局
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
float: left;
width: 200px;
min-height: 300px;
/* 將.left拉到最左邊，原來.left是掉下去的 */
margin-left: -100%;
background-color: #f00;
}
.main{
float: left;
width: 100%;
min-height: 300px;
/* .left、.right各占了200px，因此需要將其抵消掉 */
padding: 0 200px;
background-color: #c32228;
}
.right{
float: left;
width: 200px;
/* 將.right拉到最右邊，原來.right是掉下去的 */
margin-left: -200px;
min-height: 300px;
background-color: #f90;
}
</style>
<div class="header">header</div>
<div class="container clearfix">
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
table-cell實現(xiàn)雙飛翼布局(IE8也兼容哦~)
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
display: table;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left,
.right,
.main{
/* 外層容器使用table-cell布局，設(shè)置元素為table-cell布局后它們就能在一行顯示了，display: table-cell;設(shè)置寬度無效，
因此他們的寬度由內(nèi)容撐開。 */
display: table-cell;
}
.left-inner{
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
width: 100%;
}
.main-inner{
min-height: 300px;
background-color: #c32228;
}
.right-inner{
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style>
<div class="header">header</div>
<div class="container clearfix">
<div class="left">
<div class="left-inner">left</div>
</div>
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="right">
<div class="right-inner">right</div>
</div>
</div>
<div class="footer">footer</div>
絕對定位實現(xiàn)雙飛翼布局
使用絕對定位實現(xiàn)有個小問題：父容器的高度只能由.main的高度來決定
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
position: relative;
padding: 0 200px;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
min-height: 300px;
background-color: #c32228;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style>
<div class="header">header</div>
<div class="container clearfix">
<div class="left">left</div>
<div class="main">mian</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
使用flex實現(xiàn)雙飛翼布局(有兼容性問題)
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after{
display: table;
content: " ";
clear: both;
}
.container{
display: flex;
}
.header,
.footer{
height: 200px;
font-size: 28px;
background-color: #f3f3f3;
}
.left{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f00;
}
.main{
flex: 1;
width: 100%;
min-height: 300px;
background-color: #c32228;
}
.right{
flex: 0 0 200px;
width: 200px;
min-height: 300px;
background-color: #f90;
}
</style>
<div class="header">header</div>
<div class="container clearfix">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹介紹了CSS雙飛翼布局的兩種方式實現(xiàn)示例，這里整理了詳細的代碼,非常具有實用價值，需要的朋友可以參考下2017-08-22
這篇文章主要介紹了淺談css雙飛翼布局和圣杯布局,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-18- 圣杯布局跟雙飛翼布局的實現(xiàn)，目的都是左右兩欄固定寬度，中間部分自適應(yīng)。接下來通過本文教程給大家介紹CSS布局之圣杯布局與雙飛翼布局，感興趣的朋友一起學習吧2016-02-29
