圣杯布局、雙飛翼布局效果圖
從效果圖來看圣杯布局、雙飛翼布局效果是一樣一樣的。
圣杯布局、雙飛翼布局就是左右兩側(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>
浮動實(shí)現(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實(shí)現(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>
絕對定位實(shí)現(xiàn)雙飛翼布局
使用絕對定位實(shí)現(xiàn)有個(gè)小問題：父容器的高度只能由.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實(shí)現(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
