CSS-如何在列中创建浮动元素？

Question

我的应用程序上有3列布局，其中列中的项目都具有相等的宽度但高度不同。我希望各列中的项目占用每列的所有可用空间。图片已附上。

关于如何使用CSS的任何想法？给定这样的HTML布局：

<div className="container">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   <div className="item">
   ...
</div>

我本来只是想在React中使用JSX来实际创建3列，但是我认为可能有一种简单的CSS方式。

Answer 1

感谢@ divy3993提供的链接：https://w3bits.com/labs/flexbox-masonry/2/ 一旦意识到“石工”一词，谷歌搜索起来就容易得多。

父容器（在我的示例中为.container）具有以下样式：

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

砖块也应有一些间距（在我的示例中为.item）：

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}

此解决方案非常有限，因为需要max-height值，因为这些项目实际上是将列包装到列中。但是，一个简单的解决方法是添加用于计算商品高度的JavaScript。可以使用多种方法来做到这一点。