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>
.