圣杯布局和双飞翼布局主要用来解决以下问题：
1.三列布局，两侧定宽，中间自适应。2.中间栏在浏览器中优先加载渲染。
解决思路：
首先把中间的div写到前面，然后左侧，然后右侧。这样就解决了第二个问题，中间的div优先渲染。
但是这样会存在一个问题，写到前面的也会显示在前面。
为了解决这个问题，我们让这三列都浮动起来。然后设置中间列宽度为100%。
此时中间列在第一行，左右都在第二行。此时只需要将左列移动到中间的左边，右列移动到中间的右边。我们给左右加一个固定宽度，比如150px。
然后给左列加一个负边距，margin-left：-100%；右列加一个负边距margin-left：-150px；
此时可以看到三列布局已经形成。但是问题在于，中间div的内容被挡住了。在解决这个问题上，圣杯布局和双飞翼布局开始出现不同的思路。
圣杯布局首先给三列div外面套上一个div，我们可以使用语义化标签article。将article设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative。此时可以看到三列都向中间缩进了。然后再分别给左右两列增加right和left的负值，就可以达到目的了。
代码如下：
圣杯布局html代码：
<body> <article> <div class="main"> 我是中间 </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div> </article></body>
登录后复制
圣杯布局css代码：*{ margin: 0; padding: 0;}article{ padding-left:150px; padding-right:150px;}.main{ background-color: lightblue; width:100%; }.left{ background-color: yellowgreen; width:150px; margin-left:-100%; position: relative; /*left:-150px;*/}.right{ background-color: pink; width:150px; margin-left:-150px; position: relative; /*right:-150px;*/}.main,.left,.right{ float: left;}
登录后复制
双飞翼布局则是在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
代码如下：
双飞翼布局html代码：<body> <div class="main"> <div class="inside"> 我是中间 </div> </div> <div class="left"> 我是左 </div> <div class="right"> 我是右 </div></body>
登录后复制
双飞翼布局css代码：*{ margin: 0; padding: 0;}.main{ background-color: lightblue; width:100%; }.inside{ margin-left:150px; margin-right:150px;}.left{ background-color: yellowgreen; width:150px; margin-left:-100%;}.right{ background-color: pink; width:150px; margin-left:-150px;}.main,.left,.right{ float: left;}
登录后复制
接下来如果我们想让三列等高，可以给三列分别增加属性padding-bottom: 9999px;margin-bottom: -9999px;来将三列拉到无限长。再给三列外面的article标签加上overflow: hidden;属性就行了。
Ending。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3087557.html
