页面布局之两列定宽中间自适应布局

两列定宽中间自适应布局的方法有很多种，可以通过浮动或者通过定位实现。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列或多列布局</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        .container{margin:5px 0;}
        .header,.footer{
            width: 100%;
            height: 100px;
            background: #ccc;
        }
        .subMainBox{
            float: left;
            width: 200px;
            background: red;
            margin-right: -200px;
        }
        .mainBox{
            float: left;
            background: pink;
            width: auto;
            margin-left: 200px;
            margin-right: 200px;
        }
        .sideBox{
            float: right;
            width: 200px;
            background: blue;
            margin-left: -200px;
        }
        .container:after{
            display: block;
            visibility: hidden;
            content: "";
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header">头部信息</div>
    <div class="container">
        <div class="subMainBox">次要内容次要内容次要内容次要内容次要内容次要内容次要内容次要内容次要内容次要内容</div>
        <div class="mainBox">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容区域主要内容区域主容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br>
            主要内容区域主要内容区域主要内容区域<br></div>
            <div class="sideBox">侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏侧边栏栏侧边栏侧边栏侧边栏侧边栏侧边</div>
    </div>
    <div class="footer">底部信息</div>
</body>
</html>
效果图：
1(S_I%C}VRRKQLQ01G55J17.png