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>