雙飛翼佈局和聖盃佈局的對比

在不增長額外標籤的狀況下,聖盃佈局已經很是完美,聖盃佈局使用了相對定位,之後佈局是有侷限性的,並且寬度控制要改的地方也多,那麼有沒其餘方法更加簡潔方便呢?php

在淘寶UED探討下,增長多一個div就能夠不用相對佈局了,只用到了浮動和負邊距,這就是咱們所說的雙飛翼佈局。html

DOM結構:main內層增長了一個div佈局

複製代碼
<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>
複製代碼

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

複製代碼
  <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>
相關文章
相關標籤/搜索
本站公眾號
   歡迎關注本站公眾號,獲取更多信息