使用浮动的CSS tile布局

Question

我有7个瓷砖，我想使用CSS和浮动

布局，如下图所示

然而，我无法正确地将最后2个瓷砖“浮动”。 链接到codepen：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;
  }

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您是否尝试过CSS3 Flexbox？ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 您可以使用flex-start和flex-end将项目对齐到正确的位置 - 也许这可以起作用：

.container {
   display: flex;
   .first {
      align-items: flex-start;
   }
  //and so on...
}