布局

圣杯和双飞燕都是实现 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>

相关阅读:
[转载]C# TCP实现多个客户端与服务端数据与文件的传输
 【转载】心跳机制
 paip.web数据绑定下拉框的api设计选择框 uapi python .net java swing jsf总结
 paip.复制文件文件操作 api的设计uapi java python php 最佳实践
 paip.php 与js 的相似性以及为什么它们这么烂还很流行。。
paip.重装系统后firefox火狐收藏夹的恢复
 paip.截取字符串byLastDot方法总结uapi python java php c# 总结
 paip.gui控件form窗体的原理实现以及easyui的新建以及编辑实现
 paip.python php的未来预测以及它们的比较优缺点
 paip.快捷方式分组管理最佳实践ObjectDock
原文地址：https://www.cnblogs.com/jiujiaoyangkang/p/9389100.html