CSS 使用浮动的磁贴布局

Question

我有 7 个图块，我想使用 CSS 和浮动

像下图一样布局

但是我无法将最后 2 个图块正确地 'float'。 Link 代码笔：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

你试过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...
}

Answer 2

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>

CSS 使用浮动的磁贴布局

CSS tile layout using floats

html

css

layout

css-float