CSS-->两列布局，左边固定右边自适应

方法一：左边浮动，右边设置margin-left
<!DOCTYPE html>
    <title>测试</title>
    <style type="text/css">
        .box{
            border:1px solid red;
            width:100%;
        .one{
            border:1px dotted red;
            margin:5px 0px ;
            /*左侧设置向左浮动（让左侧的div脱离文档流），和固定宽度*/
            float:left;
            width:200px;
        .two{
            border:1px dashed red;
            margin:5px 0px;
            /*右侧设置左边距（应大于或等于左侧div的width）*/
            margin-left:210px;
    </style>
</head>
    <div class="box">
        <div class="one">
            盒子里的第一div
        <div class="two">
            盒子里的第二个div
</body>
</html>
方法二：利用flex布局
<!DOCTYPE html>
    <title>测试页面</title>
    <style type="text/css">
        .container{
            height:200px;
            width:800px;
            border:1px dotted pink;
            padding:10px;
            /*给容器设置flex布局和flex方向*/
            display:flex;
            flex-direction: row;
        .one{
            border:1px dotted pink;
            height:200px;
            /*给左侧设置固定宽度*/
            width:50px;
        .two{
            border:1px dotted pink;
            /*第二个设置width100%*/
            width:100%;
    </style>
</head>
    <div class="container">
        <div class="one">我是第一列</div>
        <div class="two">我是第二列</div>
</body>
</html>
方法三：利用calc()函数
<!DOCTYPE html>
    <title>测试页面</title>
    <style type="text/css">
    .one,.two{
        border:1px solid pink;
    .one{
        float:left;
        width:200px;
        text-align:center;
    .two{
        float:right;
        width:calc(100% - 200px - 4px);
    </style>
</head>
    <div class="container">
        <div class="one">我是第一列</div>