双飞翼布局

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

* {
  padding: 0;
  margin: 0;
}
.warp {
  width: 100vw;
  height: 500px;
  margin: 0 auto;
}
.content,
.left,
.right {
  float: left;
  height: 100%;
}
.content {
  width: 100%;
}
.main {
  background: pink;
  margin: 0 200px;
  height: 100%;
}
.left,
.right {
  width: 200px;
}

.left {
  background: green;
  margin-left: -100%;
}
.right {
  background: yellow;
  margin-left: -200px;
}

• 优点: 不会变形
• 缺点: 增加一个 dom 节点