三列布局之圣杯布局和双飞翼布局

什么是三列布局？

简单理解就是，页面有三个等高的模块，左右两个模块宽高固定，中间模块的宽度随视口的变化而变化。
注意点：

1. 为了保证中间模块正常显示，需设置视口最小宽度
2. 要保证中间列优先加载（所以不能单纯用浮动解决）
3. 在整体布局中，尽量少用绝对定位

圣杯布局

HTML：

<div class="container">
       <div class="center">center</div>
       <div class="left">left</div>
       <div class="right">right</div>
   </div>

1.设置body最小宽度，设置container的宽度为100%，让左右模块左浮动，左右内边距为左右模块的宽度
2.开始移动左右模块，首先使用左边距将模块移动到center那一行，设置left的左边距为-100%，right的左边距为right的宽度：

3.将左右模块“推出去”，使用相对定位即可，效果图跟文章开头图片一致
CSS：

    body{
            margin: 0px;
            padding: 0px;
            min-width:600px;
        }
        .container{
            padding: 0 200px;
        }
        .center{
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -100%;
            position: relative;
            right: 200px;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: plum;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }

双飞翼布局

HTML：

       <div class="center">
            <div class="inner">
                center
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>

由html可以看到，在center模块里多加入了inner模块，目的就在于为center设置左右内边距，为left模块和right模块腾出位置，让inner作为真正的center模块。

1.设置body最小宽度，设置center的宽度为100%，让左右模块左浮动，其左右内边距为左右模块的宽度。2.开始移动左右模块，设置left的左边距为-100%，right的左边距为right的宽度。
CSS：

body{
           margin: 0px;
           padding: 0px;
           min-width:600px;
       }
       .center{
           width: 100%;
           height: 200px;
           background: red;
           float: left;
           
       }
       .left{
           width: 200px;
           height: 200px;
           background-color: pink;
           float: left;
           margin-left: -100%;
       }
       .right{
           width: 200px;
           height: 200px;
           background-color: plum;
           float: left;
           margin-left: -200px;
       }
       .inner{
           padding: 0 200px;
           height: 200px;
       }

小结

圣杯布局用到了浮动和相对定位，代码较为复杂；双飞翼布局用到了浮动，需为中间模块设置内边距。