关于圣杯布局的一些浅解

圣杯布局

首先放一下原址及出处：圣杯布局

容器div的侧面有自适应中心和固定宽度的衬垫。然后诀窍是让左列与左侧填充对齐，右侧列与右侧填充对齐，留下中心列以填充容器的自适应宽度。

圣杯大致框架，一个左边元素块，一个右边元素块，一个中间元素块

    <div class="total">
        <div class="center pub">this is center</div>
        <div class="left pub">this is left</div>
        <div class="right pub">this is right</div>        
    </div>

然后为框架添加一些样式

        div{
            text-align: center;            //文字居中
        }
        .total{
            padding:0 150px 0 200px;       //为了等会能有个清晰认识，特意使左右内边距不一致，右内边距设为150px，左内边距设为200px
        }
        .pub{
                                           //公共样式
        }
        .left{
            background-color: #77BBDD;
        }
        .right{
            background-color: #FF6633;
        }
        .center{
            background-color: #666666;
        }

        .left{
            background-color: #77BBDD;
            width:200px;
        }
        .right{
            background-color: #FF6633;
            width:150px;
        }
        .center{
            background-color: #666666;
            width:100%;      //中心列的100％宽度是指容器div的宽度，不包括填充。当布局结合在一起时，我们会再次看到这个100％的宽度，它仍将引用容器的这个中心宽度。
        }

为了清晰点，给公共样式加点底料

        .pub{
            float:left;                 为了使所有元素在同一行显示，但由于之前center的width属性设置为100%，故left与right另起一行
            height:100px;
            position:relative;
        }

        .left{
            background-color: #77BBDD;
            width:200px;
            margin-left:-100%;
        }

这里就有需要进行说明：
刚刚不是说center因为设置了width：100%导致left和right进行换行了吗，那为什么left这时又上去了呢，并且覆盖了center的一部分，其实这里就是应用了margin负数值的特性：如果给一个浮动元素加上相反方向的负margin，则会使行间距为0且内容重叠，因此在这里left是对center进行了一个覆盖操作。附上一个我觉得解释还不错的同好地址margin负值

接下来的操作就简单多了，利用relative的特点，对left进行左移

        .left{
            background-color: #77BBDD;
            width:200px;
            margin-left:-100%;
            right: 200px;                        //ps：解释在下
        }

注意：relative是相对于块元素自身的位置。