CSS 圣杯布局-蒲公英云

CSS 圣杯布局

圣杯布局，不要被名字所迷惑只是一种简单的布局方式，也不知道从何时起，这种布局方式有了这么响亮的外号。

CSS+DIV 最常见的分栏布局就是浮动布局啦，以Bootstrap框架的栅格系统为代表，现广大框架的布局基本都是这种浮动布局方式。

圣杯布局有一个非常好的特点就是减少计算。设现在做一个三栏布局，那么要计算左-中-右三个盒子的宽度，使用圣杯布局只需要左-右两个盒子的宽度（是减少计算，不是不要计算，勿喷！）。再次申明，这只是一种布局式。可以在合理的场景下使用

源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            background-color: #F3F3F3;
            font-size: 14px;
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
            letter-spacing: 0;
            color: #333333;
        }
        /* 圣杯布局 - 开始 */
        .row{
            padding: 0 200px 0 220px;
            position: relative;
            overflow: hidden;
            height: auto;
        }
        .row .left{
            width: 220px;
            height: 400px;
            background-color: #09f;
            float: left;
            margin-left: -220px;
        }
        .row .right{
            width: 200px;
            height: 600px;
            background-color: #f90;
            float: right;
            margin-right: -200px;
        }
        .row .main{
            height: 800px;
            background-color: #9f0;
        }
        /* 圣杯布局 - 结束 */
        h1{
            font-size: 60px;
            color: #fff;
            text-align: center;
            padding: 50px 15px;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main">
            <h1>圣杯布局</h1>
            <h1>WEB前端梦之蓝</h1>
            <h1>web-7258</h1>
            <h1>helang.love@qq.com</h1>
        </div>
    </div>
</body>
</html>