时间戳

首页 > 技术文章 > 圣杯布局 和 双飞翼布局

圣杯布局 和 双飞翼布局

yangkangkang 2019-08-13 11:45 原文

圣杯布局和双飞翼布局的目的：

　　1.三栏布局，中间一栏最先加载和渲染（内容最重要）

　　2. 两侧内容固定，中间内容随着宽度自适应

　　3. 一般用于 PC 网页

圣杯布局实现思路：

　　1. 将最外层的container的padding 设置为 padding: 0 150px 0 200px; 为左右两块让出空间；

　　2. 将.middle，.left ，.right 三者设为浮动；

　　3. 将middle 的 width设置为 100%;

　　4. 分别给.left设置margin-left,.right设置margin-right;将left 和right 拉到与middle同一水平；

　　5. 再用定位将左右位置设置好

圣杯布局具体代码实现：

　　html代码：

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

　　css代码：

   .container{
        padding: 0 150px 0 200px;
        overflow: hidden;
    }
    .middle,.left,.right{
        float: left;
        height: 200px;
    }
    .left{
        position: relative;
        width: 200px;
        margin-left: -100%;
        left:-200px;
        background-color: red;
    }
    .middle{
        width: 100%;
        background-color: blue;
    }
    .right{
        width: 150px;
        margin-right: -150px;
        background-color: yellow;
    }

 

双飞翼布局实现思路：

　　1. 将 .middle,.left,.right 设置为浮动

　　2. 给 middle 的width 设置为100%

　　3. 给.middle里加一个.middle-inner ,设置margin-left、margin-right,为.left 和 .right留出位置；

　　4.分别给.left 设置margin-left ,.right 设置margin-left,将.left和 .right拉到与.middle同一水平；

双飞翼布局代码实现：

　　html 代码：

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

css代码：

   .middle,.left,.right{
        float: left;
        height: 200px;
    }
    .middle{
        width: 100%;
        background-color: blue;
    }
    .middle-inner{
        margin: 0 150px 0 200px;
    }
    .left{
        width: 200px;
        margin-left: -100%;
        background-color: red;
    }
    .right{
        width: 150px;
        margin-left: -150px;
        background-color: yellow;
    }

 

双飞翼布局和圣杯布局实现的相同点：

　　1. 都用了浮动  float:left;

　　2.都利用margin 负值，将两边拉到同一水平；

　　3. 将中间宽度width设置为100%;

双飞翼布局和圣杯布局实现的区别：

　　1.圣杯布局用最外层container的padding为左右腾出空间。二双飞翼布局是在中间middle里加了一个middle-inner,并为左右腾出空间；

　　2. 圣杯布局用到了定位position,二双飞翼布局不需要用到；

推荐阅读