实现三栏布局

什么是三栏布局？

三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

三栏布局

实现方法1. 利用浮动

注意：中间的自适应div要放在最后写。

.wrapper{
            width: 700px;
            height: 400px;
            margin: 0 auto;
        }
        .wrapper .left{
            width: 200px;
            height: 400px;
            background-color: blueviolet;
            float: left;
        }
        .wrapper .right{
            width: 200px;
            height: 400px;
            background-color: deepskyblue;
            float: right;
        }
        .wrapper .middle{
            height: 400px;
            background-color: darksalmon;
        }

此方法使得中间栏总是最后渲染。
想要优先渲染中间栏，可以用到下面的方法。

方法2. 绝对定位布局

.wrapper{
            width: 700px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        .wrapper .left{
            width: 200px;
            height: 400px;
            background-color: blueviolet;
            position: absolute;
            left: 0;
        }
        .wrapper .middle{
            position: absolute;
            left: 200px;
            right: 200px;
            height: 400px;
            background-color: darksalmon;
        }
        .wrapper .right{
            width: 200px;
            height: 400px;
            background-color: deepskyblue;
           position: absolute;
           right: 0;
        }

方法3.flex布局

html同上

 .wrapper{
            width: 700px;
            height: 400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .wrapper .left{
            width: 200px;
            order: 1;
            background-color: blueviolet;    
        }
        .wrapper .middle{
           order: 2;
           flex:1;
           background-color: darksalmon;
        }
        .wrapper .right{
           width: 200px;
           order: 3;
           background-color: deepskyblue;
        }

圣杯布局

圣杯布局就是一种优先渲染中间内容的布局。

html：

css:

a. 假设我们规定左侧的固定宽度为200px，右侧的固定宽度为300px。

  .wrapper{
            width: 700px;
            height: 400px;
            padding: 0 300px 0 200px;
            margin: 0 auto;
        }

得到以下效果

b. 之后我们就要进行中间三列的宽度的设置，同时进行浮动的设置（将中间三列进行左浮动），并且进行高度的设置和定位。

.middle,.left,.right{
            float: left;
            position: relative;
            height: 400px;
        }

c. 我们要在.middle的部分进行 width：100%占满。

.middle{
            width: 100%;
            background-color: blanchedalmond;
        }

d. 此时我们看到.middle占满了，所以我们现在需要做的就是将.left拉到最左边，我们就要进行margin-left:-100%,得到下图效果。

e. 在这个时候我们可以看到，虽然我们将.left拉到了左边，但是他将中间部分的内容覆盖掉了，所以我们就要使用相对定位left:-200px。
同理我们也要对.right进行绝对定位.right:-300px

 .left{
            width: 200px;
            margin-left: -100%;
            left: -200px;
            background-color: cornflowerblue;
        }
 .right{
            width: 300px;
            margin-left: -300px;
            right: -300px;
            background-color: darkslateblue;
        }

这样就完成了三栏布局！

圣杯布局

完整css代码：

.wrapper{
            width: 700px;
            height: 400px;
            padding: 0 300px 0 200px;
            margin: 0 auto;
        }
        .middle,.left,.right{
            float: left;
            position: relative;
            height: 400px;
        }
        .middle{
            width: 100%;
            background-color: blanchedalmond;
        }
        .left{
            width: 200px;
            margin-left: -100%;
            left: -200px;
            background-color: cornflowerblue;
        }
        .right{
            width: 300px;
            margin-left: -300px;
            right: -300px;
            background-color: darkslateblue;
        }

双飞翼布局

双飞翼布局其实和圣杯布局类似，都是为了实现三栏布局，且中间内容部分优先展示

不同点就是圣杯布局利用的是 wrapper 的 padding 来保留左右位置的，而双飞翼布局利用的是给中间部分（middle）的 margin 来实现的，因为它是在 middle 的外面再次嵌套了一层 div（middle-wrapper）

html

• 在wrapper 的三列 center-wrapper、left、right分别设置左浮动
• middler-wrapper 的宽度设置为 100%，left 和 right 的宽度分别设置为 200px、300px ，对 left 设置 margin-left：-100%，使其回到上一行的最左边
• 对 right 使用 margin-left：-300px，使其回到上一行的最右边，此时就大功告成

css

 .wrapper{
            width: 1000px;
            height: 400px;
            margin: 0 auto;
        }
        .middle-wrapper,.left,.right{
            float: left;
            height: 400px;
        }
        .middle-wrapper{
            width: 100%;
            background-color: darksalmon;
        }
        .left{
            width: 200px;
            margin-left: -100%;
            background-color: goldenrod;
        }
        .right{
            width: 300px;
            margin-left: -300px;
            background-color: darkseagreen;
        }