css实现三栏水平布局双飞翼与圣杯布局

作为布局的入门级选手，网上也查看了很多信息和资源

双飞翼的html结构

<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

 

双飞翼和圣杯的布局方式类似，都用到了关键的浮动和负值的margin-left

第一步：先正常设置长宽，同一高度为120px，由于是标准流的缘故，所以三个div盒子一共分为三层

    .left, .right, .main {
        height: 120px;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .main {
        width: 100%;
        background-color: blue;
    }

效果如下

 

第二步：添加浮动，全部脱离标准流，因为main是的宽度是100%，占满整个盒子的宽度，所以left和right的盒子被挤到第二行

    .left, .right, .main {
        height: 120px;
        float: left;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
    }
    .right {
        width: 300px;
        background-color: red;
    }
    .main {
        width: 100%;
        background-color: blue;
    }

效果如下

第三步：使用margin-left的负值属性来实现这个效果

这个margin-left:-100%指的是子盒子的左边框相对父盒子的右边框的距离

    .left, .right, .main {
        height: 120px;
        float: left;
        text-align: center;
    }
    .content {
        margin: 0 300px 0 200px;
    }
    .left {
        width: 200px;
        background-color: green;
        margin-left: -100%;
    }
    .right {
        width: 300px;
        background-color: red;
        margin-left: -300px; 
    }
    .main {
        width: 100%;
        background-color: blue;
    }

相对第二步，就多了margin-left的属性

先看right盒子，相对父盒子container，他的左边框必须距离container的右边框300px，所以是margin-left: -300px; 

left一样，left盒子的左边框必须距离父盒子的右边框的100%个宽度，所以是margin-left: -100%;

效果如下

圣杯的布局类似双飞翼

多了定位，div相对少了一个

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

        .container {
            padding: 0 300px 0 200px;
        }
        .left,.right,.middle {
            height: 120px;
            float: left;
            position: relative;
            text-align: center;
        }
        .middle {
            width: 100%;
            background-color: blue;
        }
        .left {
            left: -200px;
            width: 200px;
            margin-left: -100%;
            background-color: green;
        }
        .right {
            right: -300px;
            width: 300px;
            margin-left: -300px;
            background-color: red;
        }

关于圣杯布局可以参考博客

https://blog.csdn.net/wangchengiii/article/details/77926868