三列布局（聖盃、雙飛翼）

聖盃佈局：兩邊固定，中間自適應；

　　元素代碼：

<div class="box">
        <div class="content">
           
        </div>
        <div class="left">左</div>
        <div class="right">右</div>
  </div>

　　佈局代碼：

.box {

            margin: 0px auto;

            width: 800px;

            height: 200px;

            border: 1px solid red;

            padding: 0 200px;

        }

　　　　　給父盒子設置padding來讓content的寬度值變小，給左右側留出位置。

        .box>div {

            float: left;

            height: 200px;

        }

        .content {

            width: 100%;

            background-color: antiquewhite

        }

        .left {

            width: 200px;

            height: 200px;

            background: cadetblue;

            margin-left: -100%;

            position: relative;

            left: -200px;

        }

        .right {

            width: 200px;

            background: cadetblue;

            margin-left: -200px;

            position: relative;

            left: 200px;

        }

　　　　　*/使用padding後，由於父容器沒有設置寬度，因此內容區域width變小了，main的寬度就小了，兩邊留出了足夠的位置，可是浮動不能越過父容器的padding區域，因此咱們還須要用相對位置來移動左右欄的位置。/*

雙飛翼佈局：

　　給中間部分在套上一層容器，這樣作之後，大的容器就再也不須要設置padding值，左右欄盒子也不用再設置相對佈局，代碼精簡了不少，並且不會出現變的特別窄佈局會亂掉的問題。

<div class="box">
        <div class="cont">
            <div class="center">
                內容
            </div>
        </div>
        <div class="left">
            左
        </div>
        <div class="right">
            右
        </div>
    </div>

佈局代碼：

    .box{
            width: 800px;
            height: 400px;
            border:1px solid red;
            margin:100px auto;
        }
        .box>div{
            float: left;
            height: 400px;
        }
        .cont{
            width: 100%;

        }
        .center{
            background: red;
            margin: 0 200px;
            height: 400px;
        }
        .left{
            background: blue;
            width: 200px;
            margin-left: -100%;
        }
        .right{
            background: pink;
            width: 200px;
            margin-left: -200px;
        }

構造效果是這樣，