标签：right 圣杯 middle 布局 height 双飞翼 left width 200px

圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。

圣杯布局

整体布局，main 为外部容器，容器内 middle、left、right 依次排列（注意排列顺序）。

1. 设置外部容器.main {padding: 0 200px;}；
2. 左中右部分，均设置float: left;；
3. middle 部分.middle {width: 100%;}占满；
4. 设置.left{margin-left: -100%;}使其占住 middle 的左侧；
5. 此时 left 覆盖了 middle 的部分，再设置.left{position: relative;right: 200px;width: 200px;}；
6. right 部分设置.right{margin-right: -200px;}即可。

.main {
    padding: 0 200px 0 200px;
    height: 300px;
}

.middle {
    float: left;
    width: 100%;
    height: 300px;
    background: blue;
}

.left {
    position: relative;
    right: 200px;
    float: left;
    width: 200px;
    height: 300px;
    background: red;
    margin-left: -100%;
}

.right {
    float: left;
    width: 200px;
    height: 300px;
    background: yellow;
    margin-right: -200px;
}

<div class="main">
    <div class="middle">middle</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

标签：right,圣杯,middle,布局,height,双飞翼,left,width,200px
来源： https://www.cnblogs.com/xiaoyucoding/p/12550764.html

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