CSS浮动砌体[重复]

Question

我正在创建一个包含五个（或更多）容器的布局，其中第一个容器是全宽的，其余的占 50%，并以类似砖石的布局堆叠在彼此下方。

为简单起见，我尝试使用浮动来实现这一点，但由于内容的深度不一致，内容无法正确换行，因此这可能不是最好的主意：

.post {
  box-sizing: border-box;
    width: 50%;
    margin: 0 0 40px;
    padding: 0 2.5%;
    display: inline-block;
    float: left;
  background-color: #eee;
}
.post:first-of-type {
    width: 100%;
    display: block;
    padding: 0;
}

https://codepen.io/anon/pen/YvwXYB

理想情况下，第二个/第四个 div 将垂直堆叠在左侧，第三个/第五个 div 将在右侧。我们不能在第一个 div 中添加类，所以寻找解决方案。有什么想法吗？

Answer 1

在它周围包裹一个 container-div 并使用 flex-boxes。给第一个项目一个 flex：1 100% 和瞧。

https://codepen.io/anon/pen/xzZGaJ

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .post:first-child {
  flex: 1 100%;
}

.post {
  box-sizing: border-box;
    width: 50%;
    margin: 0 0 40px;
    padding: 0 2.5%;
    display: inline-block;
  background-color: #eee;
}