左侧定宽，右侧自适应（左中右的双飞翼布局）--常用四种实现方式

左侧定宽，右侧自适应   常用的四种写法如下，打开对应注释即可。 左中右的双飞翼布局大同小异，可复用。

// css样式

.box{
  width: 100%;
  height: 100px;
  background-color: rgb(15, 56, 42);

  /* display: flex; 方法1 */

  /* position: relative; 方法2 */

}
.box .left{
  width: 200px;
  height: 100px;
  background-color:  rgb(104, 8, 8);
  
  /* float: left; 方法3&4 */
  
}
.box .right{
  /* flex: 1; 方法1 */

  /* position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0; 方法2 */
  
  /* margin-left: 200px; 方法3 */

  /* float: right;
  width: calc(100% - 200px); 方法4 */

  height: 100px;
  background-color:  rgb(10, 53, 88);
}

/** html */

<div class="box">
  <div class="left"></div>
  <div class="right"></div>
</div>