css笔记 左侧固定宽度 右侧自适应

float方式

html结构

<div class="wrapper">
    <div class="box1">
        我是左边
    </div>
    <div class="box2">
        我是右边
    </div>
</div>

css代码

 .box1 {
      width: 200px;
      float: left;
      background: red;
  }
 .box2 {
      overflow: hidden;
      background: yellow;
  }

float和margin-left

 .box1 {
      width: 200px;
      float: left;
      background: red;
  }
 .box2 {
      margin-left: 200px;
      background: yellow;
  }

flex

 .wrapper {
     display: flex;
     display: -webkit-flex;
 }

 .box1 {
     flex: 0 1 100px;
     background: red;
 }

 .box2 {
     flex: 1;
     background: #fe3;
 }