css經典佈局之雙飛翼

經典的兩個佈局方式有聖盃佈局和雙飛翼佈局，聖盃佈局主要用在國外，雙飛翼佈局是淘寶的UED團隊開發的，優化了聖盃佈局。

 

主要解決頁面分不一樣列顯示的問題，

 

通常只作頁面的時候，咱們分三部分，左邊，中間，右邊，可是瀏覽器加載頁面時，是從上到下加載，但咱們須要先加載中間部分，這個時候就須要咱們好好佈局了，

<style>

     .left{float:left; width:150px;margin-left:-100%;padding-bottom:9999px;margin-bottom:-9999px;}

     .middle{float:left;width:100%;padding-bottom:9999px;margin-bottom:-9999px; }

     .inner{margin-left:150px;margin-right:100px;}

     .right{float:left;width:100px;margin-left:-100px;padding-bottom:9999px;margin-bottom:-9999px; }

</style>

 

<article>

<div class="middle">

      <div class="inner">我是中間</div>

</div>

<div class="left">我是左邊</div>

<div class="right">我是右邊</div>

</article>