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

三种方案

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 {

4000
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;
}

表现