幾種css自適應佈局方式

1.float+margin（自適應的那個元素），適應橫向佈局

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            float: left;
        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: right;
        }

        .zhong {
            height: 500px;
            margin: 0 200px;
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>  
</body>

</html>

2.float+絕對定位（自適應的那個元素），適應橫向佈局

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            float: left;
        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: right;
        }

        .zhong {
            height: 500px;
            position: absolute;
            left:200px;
            right:200px;
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>
</body>

</html>

3.絕對定位+絕對定位（自適應的那個元素），適應橫向佈局，豎向佈局

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            position: absolute;
            left: 0px;
        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            position: absolute;
            right: 0px;
        }

        .zhong {
            height: 500px;
            position: absolute;
            left:200px;
            right:200px;
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>
</body>

</html>

4. 中間那個先用box包裹，box和左右採用float，然後left用margin-left：-100%；right用margin-left：-200px；

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }
        .box{
            width: 100%;
            height: 100%;
            float: left;
        }
        .zhong {
            height: 500px;
            background-color: #f0f;
            margin: 0 200px;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            left: 0px;
            float: left;
            margin-left: -100%;

        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: left;
            margin-left: -200px;
        }
        
    </style>
</head>

<body>
    <div class="box">
            <div class="zhong"></div>   <!--這裏注意 -->
    </div>
    <div class="left"></div>
    <div class="right"></div>
    
</body>

</html>

5.聖盃佈局和雙飛翼佈局

區別：聖盃佈局和雙飛翼佈局解決的問題都是一樣的。兩邊固定寬度，中間自適應的三欄佈局，已經由此演變出來的類似其他佈局格式。中間佈局代碼要寫在前邊，保證第一個渲染

（1）父元素包含三個元素
（2）中間的盒子寬度設置爲100%，自適應，並且在三個元素的最前面顯示，第一個渲染

其實雙飛翼佈局多了一個box包裹

1.聖盃佈局

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .container {
            height: 500px;
            overflow: hidden;
            /*清除浮動 */
        }

        .zhong {
            height: 500px;
            background-color: #f0f;
            left: 200px;
            right: 200px;
            position: absolute;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            left: 0px;
            float: left;
        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: right;

        }

        .head,
        .foot {
            width: 100%;
            height: 50px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="head">head</div>
    <div class="container">
        <div class="zhong"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="foot">foot</div>
</body>

</html>

2.雙飛翼佈局

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>左中右三列 左右固定200px 中間自適應佔滿</title>
    <style>
        body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-size: 30px;
            font-weight: 500;
            text-align: center;
        }

        .container{
            height: 500px;
            overflow: hidden;
        }
         .box {
            width: 100%;
            height: 100%;
            float: left;
        }

        .zhong {
            height: 500px;
            background-color: #f0f;
            margin: 0 200px;
        }

        .left {
            width: 200px;
            height: 500px;
            background-color: red;
            left: 0px;
            float: left;
            margin-left: -100%;

        }

        .right {
            width: 200px;
            height: 500px;
            background-color: #00f;
            float: left;
            margin-left: -200px;
        }

        .head,
        .foot {
            width: 100%;
            height: 50px;
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="head">head</div>
    <div class="container">
        <div class="box">
            <div class="zhong"></div>
            <!--這裏注意 -->
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="foot">foot</div>
</body>

</html>