mark

左侧定宽，右侧自适应布局：

<!-- html -->
<div class="left">left</div>
<div class="right">right</div>

.left{
  background-color: #4FB3A4;
  width: 200px;
  height: 500px;
}
.right{
  background-color: #e07d075c;
  height: 500px;
}

flex 布局

body{
  display: flex;
}
.left{
  flex: 0 0 200px;
}
.right{
  flex: 1;
}

flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]

默认 0 1 auto

flex-grow：定义项目的放大比例，默认为0
flex-shrink：定义了项目的缩小比例，默认为1
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）

左侧浮动，右侧width:100%

.left{
  float: left;
}
.right{
  width: 100%;
}

左侧绝对定位，右侧设置margin-left

body{
  position: relative;
}
.left{
  position: absolute;
}
.right{
  margin-left: 200px;
}

两侧都是绝对定位

body{
  position: relative;
}
.left{
  position: absolute;
}
.right{
  position: absolute;
  left: 200px;
  width: 100%;
}

两侧都左浮动，右侧设置calc宽度

.left{
  float: left;
}
.right{
  float: left;
  width: calc(100% - 200px);
}

负margin

首先需要把右侧自适应部分用容器包起来并放在前面：

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

.wrapper{
  float: left;
  width: 100%;
}
.left{
  float: left;
  margin-left: -100%;
}
.right{
  margin-left: 200px;
}

双飞翼布局（三栏布局）

mark

flex布局

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

body{
  display: flex;
} 
.left{
  flex: 0 0 200px;
}
.content{
  flex: 1;
}
.right{
  flex: 0 0 200px;
}

负margin

原理同左侧定宽，右侧自适应布局的负margin方法。将content放置在文档流前面可以让其优先渲染。

<div class="wrapper">
  <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

三者都设置向左浮动。
设置wrapper宽度为100%。
设置负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
设置content的margin值给左右两个子面板留出空间。

.wrapper{
  float: left;
  width: 100%;
}
.left{
  float: left;
  margin-left: -100%;
}
.right{
  float: left;
  margin-left: -200px;
}
.content{
  margin : 0 200px;
}

计算宽度calc()

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

.left{
  float: left;
}
.right{
  float: left;
}
.content{
  float: left;
  width: calc(100% - 400px)
}