如何制作不同尺寸的盒子相互浮动并填充可用空间（需要响应式解决方案）？

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列会进入一列。 感谢任何帮助或提示。

更新：我想解释一下为什么解决方案here（问题标记为重复）并不适用于我 - 在那个问题中，项目大致相同，它们几乎相同同质，所以他们可以近似计算多少项进入哪一列。在我的示例中，项目的大小可能非常不同，因此如果创建了2个（例如）列，则放置html布局并不清楚，有多少div进入哪个列，例如，＆＃39; header 1＆＃39;盒子可以和2-5一样高度 - 它们的高度是动态的。

Answer 1

您可以使用column-width属性（CSS列），但您可能必须检查该功能的浏览器支持。

这是documentation。

这是一个fiddle。