填补空白

Question

如下图所示，紫色，浅蓝色和黄色位于较低位置。我希望他们填补他们上面的空间。我每行修复4列，但每列的高度都不会修复。我怎样才能让这种动态变化？

Answer 1

使用

display : inline-block;
float : left;
clear : none

Answer 2

使用flexbox布局获取此信息。

下面的内容会有所帮助。在框的容器中使用下面的CSS，然后设置框的宽度和高度。高度可以是动态的。将框的高度设置为自动或百分比值。

.container{
  width:200px;
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vw;
}