标签：right 圣杯 布局 100px height 双飞翼 main left

背景

随着前端技术的发展推进，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;}

双飞翼布局

ps:
“这不是一样的图嘛？”
“对！就是一样的，因为是解决同一种问题的嘛。”

【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）是鸟的一大部分，双翼也是身体的一部分。

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

其他布局

其他布局方案已经整理到此文中，欢迎大家前往指正

【整理】CSS布局方案

标签：right,圣杯,布局,100px,height,双飞翼,main,left
来源： https://www.cnblogs.com/baimeishaoxia/p/12209543.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。