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>