css--雙飛翼佈局
阿新 • • 發佈：2020-12-04
聖盃佈局和雙飛翼佈局達到的效果基本相同，都是側邊兩欄寬度固定，中間欄寬度自適應。
主要的不同之處就是在解決中間部分被擋住的問題時，採取的解決辦法不一樣。
聖盃佈局是在父元素上設定了padding-left和padding-right，在給左右兩邊的內容設定position為relative，通過左移和右移來使得左右兩邊的內容得以很好的展現；
而雙飛翼則是在center這個div中再加了一個div來放置內容，在給這個新的div設定margin-left和margin-right 。
DOM結構
<div class="header">Header</div> <樣式div class="bd"> <div class="main"> <div class="inner"> Main </div> </div> <div class="left">Left</div> <div class="right">Right </div> </div> <div class="footer">Footer</div>
<style> body{padding:0;margin:0} .header,.footer{width:100%; background: #666;height:30px;clear:both;} .bd{ /*padding-left:150px;*/ /*padding-right:190px;*/ } .left{ background: #E79F6D; width:150px; float:left; margin-left:-100%; /*position: relative;*/ /*left:-150px;*/ } .main{ background: #D6D6D6; width:100%; float:left; } .right{ background: #77BBDD; width:190px; float:left; margin-left:-190px; /*position:relative;*/ /*right:-190px;*/ } .inner{ margin-left:150px; margin-right:190px; } </style>