html - 使用 float 的 CSS tile 布局

Question

我有 7 个图 block ，我想使用 CSS 和 float 布局，如下图所示

但是我无法让最后 2 个图 block 正确“ float ”。 代码笔链接:http://codepen.io/anon/pen/EPeRqO?editors=1100

这是我的代码

<div class="container">
  <div class="first">first</div>
  <div class="sixth">6th</div>
  <div class="fourth">fourth</div>
  <div class="second">second</div>
  <div class="seventh">seventh</div>
  <div class="fifth">fifth</div>
  <div class="third">third</div>
</div>

还有我的 CSS

.container {max-width:1220px; max-height:370px;}
div{margin-right:10px;}
.first{  float:left;  width:550px;  height:370px;  background-color:#d7df52;  }
.second{  float:left;  width:210px;  height:190px;  background-color:#51a279;  }
.third{  float:left;  width:210px;  height:215px;  background-color:#d17466;  }
.fourth{  float:right;  width:210px;  height:190px;  background-color:#d17466;  }
.fifth{  float:right;  width:210px;  height:180px;  background-color:#d17466;  }
.sixth{  float:right;  width:210px;  height:170px;  background-color:#d17466;  }
.seventh{  float:right;  width:210px;  height:200px;  background-color:#d17466;  }

Answer 1

Flebox 可以做到这一点......也可以按顺序:

Codepen Demo

相关部分

.container {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap:wrap;
  }

* {
  box-sizing: border-box;
}

.container {
  width: 1230px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap:wrap;
  height: 430px;
  padding-left: 10px;
  }

.container div {
  margin: 10px 10px 0 0;
}


.first {
  margin-left: 10px;
  width: 550px;
  height: 370px;
  background-color: #d7df52;
}

.second {
   width: 210px;
  height: 190px;
  background-color: #51a279;
}

.third {
  width: 210px;
  height: 215px;
  background-color: #d17466;
}

.fourth {
  width: 210px;
  height: 190px;
  background-color: #d17466;
}

.fifth {
  width: 210px;
  height: 180px;
  background-color: #d17466;
}

.sixth {
  width: 210px;
  height: 170px;
  background-color: #d17466;
}

.seventh {
  width: 210px;
  height: 200px;
  background-color: #d17466;
}

<div class="container">
  <div class="first">first</div>
  <div class="second">second</div>
  <div class="third">third</div>
  <div class="fourth">fourth</div>
  <div class="fifth">fifth</div>
  <div class="sixth">sixth</div>  
  <div class="seventh">seventh</div>  
</div>