两列布局css

方案一：

//父盒子
#parent{
    width: 100%;
    position: relative; 
}
//左侧子盒子定宽
#left {
    width: 400px;  /* 左侧定宽 */
    position: absolute;
}
//右侧子盒子自适应
#right {
    position: absolute;
    left: 400px; /* 右侧距离父盒子定宽 */
}

方案二：

//父盒子
#parent{
    width: 100%;
    /* 子元素 - 水平排列 */
    display: flex;
}
//左侧子盒子定宽
#left {
    width: 400px;  /* 定宽 */
}
//右侧子盒子自适应
#right {
    /* 右边自适应设置 100% - 400 */
    flex:1;
}

方案三：

//父盒子
#parent{
    width: 100%;
    display: table;
}
//左侧子盒子定宽
#left {
    display:table-cell;  /* td */ 
    width: 400px;  /* 定宽 */
}
//右侧子盒子自适应
#right {
    display:table-cell;  /* td */ 
}