用css实现分栏布局

在@MockingBird 基础上修改的响应式？：

<div class="con">
  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>

  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>

  <div class="box fleft"></div>
  <div class="box fright"></div>
  <div class="box center"></div>
</div>

.con {
  font-size: 0;
  max-width: 960px;
  margin: 0 auto;
}

.box{
  display: block;
  border: 1px solid #000;
  height: 50px;  
  font-size: 14px;
  /* margin: 1%; */
}

.fleft {
  float: left;
  width: 20%;
  border-color: blue;
}
.fright {
  float: right;
  width: 20%;
  border-color: red;
}
.center {
  margin: 0 35%;
  width: auto;
}