css常见布局（三）

一、圣杯布局

特点是有头部顶部，中间是主要内容区，内容区中又分为三块，左中右，中间属于主要内容区。思路是都朝一个方向浮动，中间宽度为100%，然后左右通过设置负的margin把挤下去的左右拉上来再设置相对定位。

.header{
            height: 100px;
            background-color: #111;
        }

        .footer{
            height: 100px;
            background-color: #222;
        }
        .container{
            padding: 0 200px 0 100px;
            overflow: hidden;
        }
        .main,.left,.right{
            position: relative;
            min-height: 300px;
            float: left;
        }
        .main{
            background-color: #333;
            width: 100%;
        }
        .left{
            width: 100px;
            margin-left: -100%;
            left: -100px;
            background-color: #444;
        }
        .right{
            width: 200px;
            margin-left: -200px;
            right: -200px;
            background-color: #555;
        }
    <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>

image.png

二、双飞翼布局

特点是先把主内容width设置100%，把空间沾满，然后通过负margin的把左右列拉上来，然后为了避免中间局域的内容被左右覆盖，再使用margin使中间内容区可见。

.header{
            height: 100px;
            background-color: #111;
        }
         .footer{
            height: 100px;
            background-color: #222;
            clear: both;
        }
        .main,.left,.right{
            min-height: 300px;
            float: left;
        }
        .main{
            background-color: #333;
            width: 100%;
        }
        .main .wrapper{
            margin: 0 200px 0 100px;
            word-break: break-all;
        }
        .left{
            width: 100px;
            margin-left: -100%;
            background-color: #444;
        }
        .right{
            width: 200px;
            margin-left: -200px;
            background-color: #555;
        }
 <div class="header">header</div>
 <div class="main">
     <div class="wrapper">
         main
     </div>
 </div>
 <div class="left">left</div>
 <div class="right">right</div>
 <div class="footer">footer</div>