CSS样式布局学习一（双飞翼布局&圣杯布局）

双飞翼布局源于淘宝的UED，圣杯布局来源于文章In Search of the Holy Grail，具体造型如下：

可以由以下几种方式去实现：

（一）float和margin负边距（采用先中间，后两边的方式强势插入）

1、html结构

<div class="header">header</div>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

2、CSS样式

*{
            margin:0;
            padding:0;
        }
        .header,.footer{
            width:100%;
            height:80px;
            background: #0b2e13;
            color:#fff;
            text-align: center;
        }
        .main,.left,.right{
            float:left;
            min-height:130px;
            color:#fff;
            text-align: center;
        }
        .main{
            background: #1c7430;
            width:100%;
        }
        .left{
            background: #0c5460;
            width:200px;
            margin-left:-100%;
        }
        .right{
            background: #17a2b8;
            width:200px;
            margin-left:-200px;
        }
        .footer{
            clear: both;
        }

（二） 采用定位relative，absolute 方式实现（从左到右）

1、html结构

    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="main">main</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>

2、CSS样式

*{
            margin:0;
            padding:0;
        }
        .header,.footer{
            width:100%;
            height:80px;
            background: #0b2e13;
            color:#fff;
            text-align: center;
        }
        .container{
            position:relative;
        }
        .main,.left,.right{
            min-height:130px;
            color:#fff;
            text-align: center;
        }
        .main{
            background: #1c7430;
            padding:0 200px;
            word-break: break-all;
        }
        .left{
            background: #0c5460;
            width:200px;
            position: absolute;
            top:0;
            left:0;
        }
        .right{
            background: #17a2b8;
            width:200px;
            position: absolute;
            right:0;
            top:0;
        }
        .footer{
            clear: both;
        }