CSS 实现左中右结构布局

方法一：

    CSS兼容IE9（不使用CSS3）

 .box{
            width: 100%;
            height: 500px;
            box-sizing: border-box;
            border: 1px solid red;
        }
        .left{
            float: left;
            display: inline-block;
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
            text-align: center;
        }
        .center{
            float: left;
            padding: 0 100px;
            margin: 0 -100px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid red;
            text-align: center;
        }
        .right{
            float: left;
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
            text-align: center;
        }

主要是 .center 布局

   padding: 0 100px;
   margin: 0 -100px;

方法二：

    使用CSS3的flex盒子模型布局

.box{
            width: 100%;
            height: 500px;
            box-sizing: border-box;
            border: 1px solid red;
            display: flex;
        }
        .left{
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }
        .center{
            flex: 1;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }
        .right{
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }

主要关键点: .box {display: flex;}  .center{flex: 1;}

方法三：

    使用CSS3的calc函数动态计算宽度

.left{
            float: left;
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }
        .center{
            display: inline-block;
            width: calc(100% - 200px);
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }
        .right{
            float: right;
            width: 100px;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid green;
        }