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 {
    width: 50px;
    border: 1px solid blue;
    float: left;
  }
  .RightChildren {
    width: 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 {
    width: 50px;
    border: 1px solid blue;
  }
  .RightChildren {
    border: 1px solid green;
    flex: 1;
  }
</style>

.

相关文章:

  • 2021-09-25
  • 2021-10-07
  • 2022-12-23
  • 2022-02-09
  • 2021-09-27
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-05-18
  • 2022-01-04
  • 2022-12-23
  • 2021-06-05
  • 2022-12-23
相关资源
相似解决方案