CSS - 你如何在列中创建浮动元素？ [复制]

【问题标题】：CSS - How do you create floating elements in columns? [duplicate]CSS - 你如何在列中创建浮动元素？ [复制]
【发布时间】：2019-01-24 05:24:50
【问题描述】：

我的应用程序有一个 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 方法可以做到这一点。

【问题讨论】：

能否请您也添加css代码。谢谢
w3bits.com/labs/flexbox-masonry/2 - 我猜你需要链接中的“垂直砌体”。
把你试过的发给我。我们不能为您做所有事情
谢谢。知道这个词真的很有帮助
css-tricks.com/snippets/css/a-guide-to-flexbox

标签： css reactjs

【解决方案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。可以使用多种方法来做到这一点。

【讨论】：