? ? 上一文，【聊一聊】css中的經典布局——圣杯布局中，我介紹過，圣杯布局不添加額外的標簽（主要是只中間塊）。在不增加額外標簽的情況下，圣杯布局已經非常完美，圣杯布局使用了相對定位，以后布局是有局限性的，而且寬度控制要改的地方也多，那么有沒其他方法更加簡潔方便呢？

? ? 今天，我們來認識一下它的小伙伴——雙飛翼布局。

? ??在淘寶UED探討下，增加多一個div就可以不用相對布局了，只用到了浮動和負邊距，這就是我們所說的雙飛翼布局。

? ? DOM結構：main內層增加了一個div

<div class="header">Header</div><div class="bd"><div class="main"><div class="inner">Mian</div></div><div class="left">Left</div><div class="right">Right</div></div><div class="footer">Footer</div>

樣式：去掉了左右欄的相對定位，去掉包裹層padding，以中間欄新增div的margin代替

*{padding:0;margin:0;}.header,.footer{height:50px;width:100%;background:#666;clear:both;}.bd{/* padding-left:150px;padding-right:190px; */}.main{width:100%;float:left;background:#D6D6D6;}.left{width:150px;background:#E79F6D;float:left;margin-left:-100%; /*相對于包含快的寬度*//* position:relative;left:-150px; */}.right{float:left;width:190px;background:#77BBDD;margin-left:-190px;/* position:relative;right:-190px; */}.inner{margin-left:150px;margin-right:190px;}

?這個布局還有個好處，讓Main變成BFC元素了，屏幕寬度縮小Main也不會被擠下去，圣杯布局就會被擠下去。

?

轉載于:https://www.cnblogs.com/hl-520/p/5754111.html

總結

以上是生活随笔為你收集整理的【聊一聊】css中的经典布局——双飞翼布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。