css的两栏布局

　　　经典的实现左边固定宽度，右边宽度自适应的几种方法

1. 利用float和margin-left属性（margin-left的值可以稍稍大于或者等于.left的宽度）

 .left{
            width: 30px;
            float: left;
            background-color: red;
        }
        .right{
            margin-left: 50px;
            background-color: blue;
        }

　　　2.利用position和margin属性

.parent{
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            width: 50px;
            background-color: red;
        }
        .right{
            margin-left: 50px;
            background-color: blue;
        }

　　　3.flex布局

.parent {
            display: flex;
            align-items: flex-start;
        }

        .left {
            flex: 0 0 auto;
            background-color: red;
        }

        .right {
            flex: 1 1 auto;
            background-color: blue;
        }

或者也可以使用flex-grow属性，直接在.right上面申明flow-grow属性为1，.right将自动填充剩余的空间

 .parent{
            display: flex;
        }
        .left {
　　　　　　　width: 50px;
            background-color: red;
        }

        .right {
            flex-grow: 1;
            background-color: blue;
        }

 

转载于:https://www.cnblogs.com/yinping/p/11262966.html