圣杯布局原码

给三个div设置左浮动，因为父容器设置了padding值，中间main的宽度等于芙蓉区内容的宽度，
设置左右两侧的宽度为190px;父容器padding值为200px;设置190px;是为了方便查看显示效果：
左边设置margin-left:-100%;是为了让左侧栏移动到元素最左侧，右边设置margin-left:-190px;是让其移动到最右侧；
设置position:relative;right:-200px;
是为了让右侧栏填充父元素的padding-right值空出来的位置，不要覆盖main上面在同一行位置；设置左侧栏posotion:relative;left:-200px;是为了让左侧栏填充
父元素左侧的padding-left值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .page {
            padding: 0 200px; /*设置父容器左右padding值为200px*/
            min-width: 200px;
        }
        .main {
            width: 100%;
            height: 30px;
            background-color: skyblue;
            float: left;
        }
        .left {
            width: 190px;    /*设置左边布局宽度为190px*/
            height: 30px;
            background-color: blue;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 190px;    /*设置左边布局宽度为190px*/
            height: 30px;
            background-color: pink;
            float: left;    
            margin-left: -190px;
            position: relative;
            right: -200px;
        }
        /*圣杯布局*/
    </style>
</head>
<body>
    <div class="page">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

圣杯布局代码