面试中的CSS（一）--双列布局

1.flex大法好（左可以定宽，也可以不定宽）

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

.parent {
  display: flex;
}
.left {
  width: 200px; // 可以不写，这样左边不定宽
}
.right {
  flex: 1;
}

2.float + margin (左定宽)

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

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

3.float + overflow (左可以定宽，也可以不定宽)

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

.left {
  width: 200px; // 可以不写，这样左边不定宽
  float: left;
}
.right {
  overflow: hidden; // 触发BFC
}

4.绝对定位（左定宽）

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

.parent {
  position: relative;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
}
.right {
  position: absolute;
  left: 200px;
  right: 0;
  top: 0;
}