SOURCE

<div class="wrapper">
  <div class="ban1"></div>
  <div class="ban2"></div>
  <div class="ban3"></div>
  <div class="ban4"></div>
  <div class="ban5"></div>
  <div class="ban6"></div>
  <div class="ban7"></div>
</div>

.wrapper {
  border: 1px solid greenyellow;
  stext-align: center;
}

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

.ban1 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban2 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban3 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban4 {
  height: 400px;
  width: 24%;
  float: right;
  border: 1px solid yellow;
}
.ban5 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban6 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban7 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}
.ban8 {
  height: 200px;
  width: 24%;
  float: left;
  border: 1px solid yellow;
}