CSS实现左侧固定宽度右侧自适应的固比布局

三种方案

1、 box1使用diaplay:table; display:table-cell; 配合calc 实现。

2、 box2使用dispaly:flex;flex:1实现。

3、 box3使用position、配合padding-left 或border-left 实现。

以上三种方案，可根据不同的应用场景，选择不同的方案，然后优化兼容性的问题。

HTML

<div class="box box1">
            <div class="item1 left1">title</div>
            <div class="item1 right1">box1 content</div>
        </div>

        <div class="box box2">
            <div class="left2">title</div>
            <div class="right2">box2 content</div>
        </div>
        <div class="box box3">
            <div class="left3">title</div>
            <div class="right3">box3 content</div>
        </div>

CSS

* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    height: 100px;
    font-size: 18px;
    color: #fff;
    margin-top: 50px;
}

.box1 {
    display: table;
}

.left1 {
    width: 50px;
    height: 100px;
    background-color: #B1D5EF;
    display: table-cell;
}

.right1 {
    width: calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    height: 100px;
    background-color: #268BD2;
    display: table-cell;
}

.box2 {
    display: flex;
    display: -webkit-flex;
}

.left2 {
    width: 50px;
    height: 100px;
    background-color: #B1D5EF;
    display: inline-flex;
    display: -webkit-inline-flex;
}

.right2 {
    flex: 1;
    height: 100px;
    background-color: #268BD2;
    display: inline-flex;
    display: -webkit-inline-flex;
}

.box3 {
    position: relative;
}

.left3 {
    width: 50px;
    height: 100px;
    background-color: #B1D5EF;
    display: table-cell;
    position: absolute;
    left: 0;
    top: 0;
}

.right3 {
    width: 100%;
    height: 100px;
    /*border-left: 50px solid #268BD2;*/
    padding-left: 50px;
    background-color: #268BD2;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

表现