html - 不同宽度的div元素，将后续div堆叠在较短的列上

Question

我想将数据组织成等宽的两列，但每个元素的高度可能不同。很难解释，但如果你有 div1的 height 500和 div2的 height 400 , 然后添加 div3任何高度，它都应该出现在div2的正下方而不是 div1因为div2更短。但是，如果 div1更短，div3而是会出现在它下面。

最初我使用的是表格，因为它主要是表格数据，但是当两个文本字段中的一个比任何一个长时(左边一个对右边一个)，它会拉伸(stretch)较短的以匹配高度。我最终得到不同高度的行，较短列中的元素将拉伸(stretch)以适合该行(由任一元素中较高的元素决定)。我不希望它拉伸(stretch)，我宁愿它堆叠以尽量减少空白。

Here's a mockup我正在努力实现的目标。在顶部，您将看到只有一个元素的页面，然后在其下方您将看到两个元素，然后是三个和四个元素。第三个元素低于第二个元素，因为右列的总高度较短，但第四个元素低于第一个元素，因为添加第三个元素后，左列现在较短。

我能想到的唯一使用类似组织风格的网站是 Pinterest。

Answer 1

这个概念在网络上通常被称为砌体。这是一个可以帮助您实现它的 javascript 库的链接。 http://masonry.desandro.com/

这也可以使用现代浏览器的 FlexBox css 来完成。这个问题已经解决了:using flexbox to get pinterest or jQuery masonry layout