圣杯布局

圣杯布局

<div class="wrap clear">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.wrap {
  padding-left: 120px;
  padding-right: 120px;
  min-width: 400px;
  background: #000;
}

.clear::after {
  content: '';
  display: block;
  clear: both;
}

.main {
  width: 100%;
  height: 400px;
  float: left;
  background: #00c3ff;
}

.left {
  float: left;
  width:120px;
  height: 400px;
  background: #00ffc3;
  margin-left: -100%;
  position: relative;
  left: -120px;
}

.right {
  float: left;
  width: 120px;
  height: 400px;
  background: #c3ff00;
  margin-left: -120px;
  position: relative;
  left: 120px;
}

点此预览