CSS 布局 - 浮动：...向上？

Question

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

所以像 -

变成

我意识到这是通过 javascript 库完成的，例如 Masonry。

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

相关代码笔 https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw

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;
    }
}

Answer 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>

CSS 布局 - 浮动：...向上？

CSS Layout - Float: ...up?

css

layout

css-float