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

理想情况下，second/fourth div 将垂直堆叠在左侧，而 third/fifth div 将在右侧。我们无法在第一个div后添加一个class，所以寻找解决方案。有什么想法吗？

Answer 1

在其周围包裹一个容器-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;
}

CSS 浮动砌体

CSS float masonry

css

css-float

flexbox

css-grid