布局

圣杯和双飞燕都是实现 3 栏布局的方式，即两边栏固定，中间自适应，不同的是对中间栏不被遮挡的处理方式不一样。

圣杯：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7     *{
 8         margin: 0;
 9         padding: 0;
10     }
11     .container{
12         padding: 0 300px 0 200px;
13     }
14     .left,.main,.right{
15         min-height: 130px;
16         float: left;
17         position: relative;
18     }
19     .main{
20         width: 100%;
21         background-color: green;
22     }
23     .left{
24         width: 200px;
25         float: left;
26         background-color: red;
27         margin-left: -100%;
28         left: -200px;
29     }
30     .right{
31         width: 300px;
32         background-color: blue;
33         margin-left: -300px;
34         right: -300px;
35     }
36     </style>
37 </head>
38 <body>
39     <div class="container">
40         <div class="main">main</div>
41         <div class="left">left</div>
42         <div class="right">right</div>
43     </div>
44 </body>
45 </html>

双飞燕：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{

    }
    .left,.main,.right{
        float: left;
        min-height: 130px;
    }
    .main{
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 300px 0 200px;
    }
    .left{
        background-color: green;
        width: 200px;
        margin-left: -100%;
    }
    .right{
        background-color: red;
        width: 300px;
        margin-left: -300px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="content">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

Flex 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
        min-height: 130px;
    }
    .main{
        flex-grow: 1;
        background-color: green;
    }
    .left{
        order: -1;
        flex-basis: 200px;
        background-color: red;
    }
    .right{
        flex-basis: 300px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

绝对定位布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        position: relative;
    }
    .main,.left,.right{
        min-height: 130px;
        position: absolute;
        top: 0;
    }
    .main{
        /*margin: 0 300px 0 200px;*/
        right: 300px;
        left: 200px;
        background-color: green;
    }
    .left{
        left: 0;
        width: 200px;
        background-color: red;
    }
    .right{
        right: 0;
        width: 300px;
        background-color: blue;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

布局

推荐阅读