前端小栈Web前端之路程序员

【方案】圣杯布局&双飞翼布局

2017-09-08  本文已影响101人  木羽zwwill

背景

随着前端技术的发展推进,web端的布局方式已基本成熟,那么在网站布局方式中,三列布局最为常用,布局方式也有很多,渐渐的开发者们开始从效率的角度优化自己的代码
“如果三排布局能将中间的模块放在dom树前面,那么浏览器在做重绘的时候不久有限显示了吗?”
机制的开发者们开始围绕者这个方向进行了dom的优化,于是诞生了两种著名的布局方式,圣杯布局双飞翼布局

直奔主题

两种布局的背景就不讲了,直接上代码

圣杯布局


【JsFiddle】
https://jsfiddle.net/zwwill/px57xzp4/
<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">main</div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>
.container {width: 500px; margin: 50px auto;}
.wrapper {padding: 0 100px 0 100px;}
.col {position: relative; float: left;}
.header,.footer {height: 50px;}
.main {width: 100%;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;left: -100px;}
.right {width: 100px; height: 200px; margin-left: -100px; right: -100px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

双飞翼布局


【JsFiddle】
https://jsfiddle.net/zwwill/5xjyeu9d/
<div class="container">
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">main</div>
        </div>
        <div class="left col">left</div>
        <div class="right col">right</div>
    </div>
    <div class="footer">footer</div>
</div>
.col {float: left;}
.header {height: 50px;}
.main {width: 100%;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px; height: 200px; margin-left: -100%;}
.right {width: 100px; height: 200px; margin-left: -100px;}
.footer {height: 50px;}
.clearfix::after {content: ""; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden;}

差别

通俗点讲就是

圣杯布局像是,杯子(wrapper)挂上两只“耳朵”(left,right),所有容量都给了杯身(main),耳朵只能挂在两侧。
双飞翼布局像是,鸟(wrapper)的双翼(left,right),身子(main)是鸟的一大部分,双翼也是身体的一部分。

虽然比较抽象,但有助于对两种布局的区分。实在看不懂就就代码吧,本人“扯”的功力不太够。

上一篇下一篇

猜你喜欢

热点阅读