效果图
三栏布局之双飞翼布局_CSS

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 200px;
  text-align: center;
  background: #eee;
}

.header {
  height: 48px;
  background: lightblue;
}

.footer {
  clear: both;
  height: 60px;
  background: lightgray;
}

.container {
  float: left;
  width: 100%;
  height: 200px;
}

.center {
  margin: 0 300px;
  height: 100%;
  background: lightgreen;
}

.left {
  float: left;
  margin-left: -100%;
  width: 300px;
  height: 100%;
  background: yellow;
}

.right {
  float: left;
  margin-left: -300px;
  width: 300px;
  height: 100%;
  background: pink;
}

<body>
  <div class="header">this is header</div>
  <div class="container">
    <div class="center">center</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="footer">this is footer</div>
</body>
  • center 元素父容器左浮动，宽度占满
  • center 内部的 center 设置 margin 边距，给左右留出空间
  • left 元素左浮动，并且 margin-left: -100%; 使得 left 排列到上一行并且顶格排列（正好占满 center 的 margin-left）
  • right 元素左浮动，margin-left：-300px;