圣杯布局和双飞翼布局

解决的问题

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局

圣杯布局dom结构：

    <section class="layout grail">
        <h1>圣杯布局</h1>
        <article class="left-center-right">
            <div class="center">
                1.这是三栏布局的圣杯布局解决方案； 
                2.这是三栏布局的圣杯布局解决方案； 
                3.这是三栏布局的圣杯布局解决方案； 
                4.这是三栏布局的圣杯布局解决方案； 
                5.这是三栏布局的圣杯布局解决方案； 
                6.这是三栏布局的圣杯布局解决方案； 
                7.这是三栏布局的圣杯布局解决方案； 
                8.这是三栏布局的圣杯布局解决方案；
                9.这是三栏布局的圣杯布局解决方案；
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

1.首先让三个列都向左浮动：

    .layout.grail .left-center-right>div {
        float: left;
    }

2.把左右两个列提到和中间列同行（margin作用的相关解释：http://www.cnblogs.com/2050/a...）：

        .layout.grail .left {
            margin-left: -100%;
        }
        .layout.grail .right {
            margin-left: -300px;
        }

3.上面中间列被遮挡了，这时在这三列的父元素上加padding值（疑问：为什么这里不用margin呢？试了下效果也可以的~）：

    .layout.grail .left-center-right {
        padding: 0 300px;
    }

4.这时左右两列也跑上来了，通过绝对定位relative让它们回到正确的位置：

    .layout.grail .left {
        position: relative;
        left: -300px;
    }
    .layout.grail .right {
        position: relative;
        right: -300px;
    }

此时效果已经完成了，只是在窗口变小到限定值时布局会乱掉，那么给它加上一个宽度限制：

    .layout.grail .left-center-right {
        min-width: 304px;
    }

完整的CSS代码如下：

    <style>
        .layout.grail .left-center-right {
            padding: 0 300px;
            min-width: 304px;
        }
        .layout.grail .left-center-right>div {
            float: left;
            min-height: 100px;
        }
        .layout.grail .center {
            background: yellow;
        }
        .layout.grail .left {
            margin-left: -100%;
            width: 300px;
            background: red;
            position: relative;
            left: -300px;
        }
        .layout.grail .right {
            margin-left: -300px;
            width: 300px;
            background: blue;
            position: relative;
            right: -300px;
        }
    </style>

双飞翼布局

双飞翼dom结构：

    <section class="layout ued">
        <h1>双飞翼布局</h1>
        <article class="left-center-right">
            <div class="wrap">
                <div class="center">
                    1.这是三栏布局的双飞翼布局解决方案； 
                    2.这是三栏布局的双飞翼布局解决方案； 
                    3.这是三栏布局的双飞翼布局解决方案； 
                    4.这是三栏布局的双飞翼布局解决方案； 
                    5.这是三栏布局的双飞翼布局解决方案； 
                    6.这是三栏布局的双飞翼布局解决方案； 
                    7.这是三栏布局的双飞翼布局解决方案； 
                    8.这是三栏布局的双飞翼布局解决方案；
                    9.这是三栏布局的双飞翼布局解决方案；
                </div>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </article>
    </section>

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局：

    .layout.ued .left-center-right>div {
        float: left;
    }
    .layout.ued .center {
        background: yellow;
    }
    .layout.ued .left {
        margin-left: -100%;
    }
    .layout.ued .right {
        margin-left: -300px;
    }

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：圣杯布局为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div；而双飞翼布局为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

    .layout.ued .wrap {
        margin-left: 300px;
        margin-right: 300px;
    }

完整的CSS代码：

    <style>
        .layout.ued .left-center-right>div {
            float: left;
        }
        .layout.ued .wrap {
            margin-left: 300px;
            margin-right: 300px;
        }
        .layout.ued .center {
            background: yellow;
        }
        .layout.ued .left {
            background: red;
            min-height: 100px;
            width: 300px;
            margin-left: -100%;
        }
        .layout.ued .right {
            background: blue;
            min-height: 100px;
            width: 300px;
            margin-left: -300px;
        }
    </style>

转载链接：https://www.zhihu.com/questio...

本文转载于:猿2048→https://www.mk2048.com/blog/blog_hkiaihkkhcb.html