A, ----float+calc(css3新属性计算属性)方式
<div class="Father">
<div class="LeftChildren">我是左侧</div>
<div class="RightChildren">我是右侧</div>
</div>
<style rel="stylesheet/scss" lang="scss">
.Father {
border: 1px solid red;
height: 100px;
}
.LeftChildren {
50px;
border: 1px solid blue;
float: left;
}
.RightChildren {
calc(100% - 50px);
border: 1px solid green;
float: right;
}
}
</style>
B, ----flex方式
<div class="Father">
<div class="LeftChildren">我是左侧</div>
<div class="RightChildren">我是右侧</div>
</div>
<style rel="stylesheet/scss" lang="scss">
.Father {
border: 1px solid red;
height: 100px;
display: flex;
}
.LeftChildren {
50px;
border: 1px solid blue;
}
.RightChildren {
border: 1px solid green;
flex: 1;
}
</style>
.