css3实现左侧固宽,右侧随着屏幕,右侧随着屏幕变化而变化

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>

.

原文地址:https://www.cnblogs.com/crazycode2/p/12003976.html