Css布局：左边固定，右边自适应

要实现左边固定，右边自适应有好几种方法，flex，calc，float，下面我来分析一下每种方法各自的特点级缺陷。

1. flex

用flex可以实现两个div，一个左固定，一个右自适应。思路就是在要处理的div的父级div里添加display:flex属性，然后将左边的div设置固定的宽度，右边的div直接将width设置为100%，将容器撑满即可。代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div {
                height: 200px;
            }
            .flex-container {
　　　　　　　　//设置父级div的display属性为flex

                display: flex;
                width: 100%;
            }
            .div-green {
　　　　　　　　//设置左边div的宽度也定宽

                background-color: green;
                width: 220px;
            }
            .div-red {
　　　　　　　　//右边的div将容器撑满

                background-color: red;
                width: 100%;
            }

        </style>
    </head>
    <body>
        <div class="flex-container">
            <div class="div-green">div1</div>
            <div class="div-red">div2</div>
        </div>
    </body>
</html>

2. calc + inline

要想左定宽，右自适应，其实其中很纠结的点就是，怎么计算右边div的width，怎么在容器宽度不断变化的时候，计算出来右边div的宽度。calc就提供了计算的方法。

假设左边div的220px; 则右边div的宽度 calc(100% - 220px),因为百分比对应的值是可以根据容器大小变化而变化的，但是百分比是不会变的，所以用100% - 220px，就可以计算出来右边div的宽度。calc有个注意点就是 100% - 220px之间有空格，没有空格calc是不会有效果的。

还有个问题是一般div ，display:block, 这样div是默认占一行的，需要将它们的父级div的display属性设置为 inline-flex;

实现代码如下：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div {
                height: 200px;
            }
            .container {
                width: 100%;
                max-width: 1280px;
                display: inline-flex;
            }
            .div-green {
                background-color: green;
                width: 220px;
            }
            .div-red {
                background-color: red;
                width: calc(100% - 220px);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="div-green">div1</div>
            <div class="div-red">div2</div>
        </div>
    </body>
</html>

calc虽然很好用，但是还是有一些兼容性问题：IE9+、FF4.0+、Chrome19+、Safari6+，能兼容这些浏览器，但是移动端的浏览器还没支持，仅有“firefox for android 14.0”支持，其他的全军覆没。

3.float

float有两种方法，一种是直接用float，一种是用float+负边距

（1）float

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div {
                height: 200px;
            }
            .div-green {
                //设置左边的div为float:left,并且定宽
                background-color: green;
                width: 220px;
                float: left;
            }
            .div-red {
                //需要设置margin-left,因为float使得左边的div脱离文档流,所以右边的div会占据左边的位置,可以去掉margin-left试试
                background-color: red;
                margin-left: 220px;
            }
        </style>
    </head>
    <body>
        <div class="div-green">div1</div>
        <div class="div-red">div2</div>
    </body>
</html>

（2）float+负边距

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div {
                height: 200px;
            }
            .div-green {
                background-color: green;
                width: 220px;
                float: left;
                margin-right: -100%; // >220px即可
            }
            .container {
                float: left;
                width: 100%;
            }
            .div-red {
                background-color: red;
                margin-left: 220px;
            }
        </style>
    </head>
    <body>
        <div class="div-green">div1</div>
        <div class="container">
            <div class="div-red">div2</div>
        </div>
    </body>
</html>

float方法基本没有浏览器兼容性问题，可以很好的适用各种浏览器。

以上三种方法，是我总结的可以实现左边固定，右边自适应的方法，可以还有写的不是很正确的地方，欢迎指出~