css - 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 中添加类，所以寻找解决方案。有任何想法吗？

标签： cssflexboxcss-floatcss-grid

Answer 1

在它周围包裹一个容器 div 并使用 flex-boxes。给第一个项目一个弹性：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;
}