CSS实现三栏布局，中间自适应

方法一：自身浮动法。左栏左浮动，右栏右浮动。

<!-- middle放在最后 -->
<style type='text/css'>
* {
    margin:0;
    padding: 0;
}
.left , .right{
            height: 300px;

            width: 200px;
        }

        .right{
            float: right;
            background-color: red;
        }

        .left{
            float: left;
            background-color: #080808;
        }

        .middle{

            height: 300px;

            margin: 0 200px;//没有这行，当宽度缩小到一定程度的时候，中间的内容可能换行

            background-color: blue;
        }
</style>

方法二：margin负值法

<!-- middle放在开头 -->
<style type="text/css">

            body{

                margin: 0;

                padding: 0;

            }

            .left , .right{

                height: 300px;

                width: 200px;

                float: left;

            }

            .right{

                margin-left: -200px;

                background-color: red;
            }

            .left{
                margin-left: -100%;

                background-color: #080808;
            }

            .middle{
                height: 300px;
                width: 100%;
                float: left;
                background-color: blue;
            }
</style>



    <!--放第一行-->

    <div class="middle">middle</div>

    <div class="left">left</div>

    <div class="right">right</div>

方法三：绝对定位法。左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。

<style>
    body{

        margin: 0;

        padding: 0;

    }

    .left , .right{

        top: 0;

        height: 300px;

        width: 200px;

        position: absolute;

    }

    .right{

        right: 0;

        background-color: red;

    }

    .left{

        left: 0;

        background-color: #080808;

    }

    .middle{

        margin: 0 200px;

        height: 300px;

        background-color: blue;

    }
</style>


<div class="left">left</div>

<!--这种方法没有严格限定中间这栏放置何处-->

<div class="middle">middle</div>

<div class="right">right</div>