CSS 布局 - 浮动：...向上？ [复制]答案

【问题标题】：CSS Layout - Float: ...up? [duplicate]CSS 布局 - 浮动：...向上？ [复制]
【发布时间】：2018-04-22 18:45:14
【问题描述】：

是否有一种技术（编码或hacky）让浮动块向上填充以及它们的浮动方向。

所以像 -

变成

我意识到这是由 Masonry 之类的 javascript 库完成的。

只是想知道是否有任何 CSS 方法可以完成这个或类似的事情。

body * {
    box-sizing: border-box;
}

.wrapper {
    max-width: 500px;
    background: limegreen;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.block {
    height: 100px;
    background: lightblue;
    width: 250px;
    float: left;
    border: solid 2px;

    &:nth-child(even) {
        background: blue;
        height: 150px;
    }
}

【问题讨论】：

你可以使用 Flexbox 吗？
@ovokuro 当然！（甚至是网格）如果你有一个 flexbox 技术来完成这个，请将它包含在一个答案中。
这个问题看起来很像 --> stackoverflow.com/questions/25668548/…
@ovokuro 你说得对，这是重复的。如果您认为以后不会有人使用我使用的相同术语搜索它，您可以关闭它。

标签： css layout css-float

【解决方案1】：

我只是简单地制作了任何浅蓝色（奇数）元素 float: left 和任何蓝色（偶数）元素 float: right

这看起来怎么样：

body * {
  box-sizing: border-box;
  float: left;
}

.wrapper {
  max-width: 500px;
  background: limegreen;
}

.block {
  height: 100px;
  background: lightblue;
  width: 250px;
  border: solid 2px;
  vertical-align: top;
}

.block:nth-child(even) {
  float: right;
  background: blue;
  height: 150px;
}

<div class="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

【讨论】：