CSS三栏布局——双飞燕定位

这种布局方式需要对父容器设置padding，使用padding来给左右两栏空出空间

如果左右两边使用绝对定位，那么方法就和上一节的方法差不多，如果使用相对定位，在结合浮动的话，方法代码如下：


<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局</title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
        width：100%;       
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
</style> 
</head>
<body> 
    <header> </header> 
    <div class="box"> 
        <div class="box-content">
            中间内容区
        </div>
        <div class="box-left">
            左边区域内容   
        </div>
        <div class="box-right">
            右边区域
        </div> 
    </div>
    <footer>
    </footer>
</body>
</html>

这里的关键思路是：

1、首先使用margin-left或者margin-right将左右元素移动到上一行去。

2、根据相对定位，使用left或者right将左右元素移动到第一行合适的位置。