如何使大小不同的盒子相互浮动，填充可用空间(需要响应的解决方案)？

Question

使用flex

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.box {
  width: 46%;
  flex-grow: 1;  
}

获取下一张图片：

​

使用浮动

.container {
  overflow: hidden;
}

.box {
  display: inline-block;
  float: left;
}

给我下一张照片：

​

任务要求在框之间不存在垂直空间(在第一列中使用flexbox，或者在第二列中，浮动)，因此这些框相互浮动，填充所有可用的空间。盒子的宽度是一样的，但是盒子的高度不同。应该是响应的，所以当视点缩小时，这2列就会变成一列。感谢任何帮助或暗示。

更新:我想解释为什么解决方案这里 (它的问题标记为重复)不适合我--在这个问题中，项目大致相同，它们几乎是同质的，所以它们可以大致计算出条目进入哪一列的数量。在我的示例中，项的大小可能非常不同，因此如果创建了2列(例如)，则不清楚是否要放置html布局，有多少div进入哪一列，因此，例如，“header 1”框可以与2-5并排的高度相同，而且它们的高度是动态的。

Answer 1

您可以使用column-width属性(CSS列)，但是您可能必须检查浏览器对该特性的支持。

这是文档。

这里是一个相同的小提琴。