圣杯布局

所谓的圣杯布局，就是指三栏全部float浮动，两边固定宽度，中间自适应的布局，而且他中间的内容是首先渲染出来的。

我们先写出dom结构， 注意这里为了确保中间先渲染，我们将他放在容器中的第一个

<div class="container01">
    <div class="center column01">ffdsafdsaf</div>   <!--中间布局再第一个-->
    <div class="left column01"></div>
    <div class="right column01"></div>
</div>

给元素添加简单样式

<style>
    *{
        margin:0;
        padding: 0;
    }
    .container01{
        width: 100%;
        overflow: hidden;
        padding-left: 200px;
        padding-right: 150px;
        box-sizing: border-box;
    }
    .column01{
        float: left;
        height: 200px;
    }
    .left{
        width: 200px;
        background-color: #f00;
    }
    .right{
        width: 150px;
        background-color: #ff0;
    }
    .center{
        width: 100%;
        background-color: #eee;
    }
</style>

效果如下图

可以发现，因为中间的内容已经够了一行，把左边和右边的容器都撑到下一行了， 如果中间的宽度 + 左边的宽度 + 右边的宽度没有超过一行的话，他们会从左往右排开

接下来我们就需要将左边的内容，移动到左上角，一般的想法就是给他定位，然后赋予top和left值, 当然也可以通过margin-left来将他们移动到上面一行

<style> 
    .left{
        margin-left: -100%;
    }
    .right{
        margin-left: -150px;
    }
</style>

效果图如下：

我们已经快要成功了，但是发现红色和黄色遮挡住了中间的内容，因为本来他们应该再页面的最左边和最右边，这里可以使用relative定位来设定

<style>
    
    .left{
        position:relative;
        left: -200px;
    }
    .right{ 
        position:relative;
        right: -150px;
    }
</style>

就完成了

转载于:https://my.oschina.net/u/4085373/blog/3017785