18

解决的问题

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

圣杯布局

圣杯布局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;
    }

clipboard.png

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

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

clipboard.png

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

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

clipboard.png

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

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

clipboard.png

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

    .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;
    }

clipboard.png

不同在于解决”中间栏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;
    }

clipboard.png

完整的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...


lhm_582082005a5e6
130 声望1 粉丝