浮动布局

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

<style>
  #box {
    height: 200px;
  }
  
  #box > div {
    height: 100%;
  }
  
  #left {
    float: left;
    width: 200px;
    background: pink;
  }
  
  #right {
    margin-left: 200px;
    background: yellow;
  }
</style>

绝对定位

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

<style>
	#box {
    height: 200px;
    position: relative;
  }
  
  #box > div {
    height: 100%;
    position: absolute;
    top: 0;
  }
  
  #left {
    left: 0;
    width: 200px;
    background: pink;
  }
  
  #right {
    right: 0;
    background: yellow;
    left: 200px;
  }
</style>

Flex 布局

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

<style>
	#box {
    height: 200px;
    display: flex;
  }
  
  #left {
    width: 200px;
    background: pink;
  }
  
  #right {
    flex: 1;
    background: yellow;
  }
</style>

表格布局

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

<style>
	#box {
    height: 200px;
    display: table;
    width: 100%;
  }
  
  #box > div {
    height: 100%;
  }
  
  #left {
    display: table-cell;
    width: 300px;
    background: pink;
  }
  
  #right {
    display: table-cell;
    background: yellow;
  }
</style>

Grid 布局

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

<style>
	#box {
    height: 200px;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 200px;
  }
  
  #left {
    background: pink;
  }
  
  #right {
    background: yellow;
  }
</style>