如何让网站上的框堆叠成两列？

Question

在我的网站上，我有几个块，其中包含动态生成的来自不同网站的信息，导致我无法/想要控制这些块出现的顺序。现在我希望它们堆叠在左列或右列中，具体取决于哪里有空间。

为了澄清一下，我画出了它的样子以及我想要的样子，但是该网站不允许我发布它们，所以我希望我的描述足够清晰（如果不是，图像是

https://i.sstatic.net/78R5d.png

和

https://i.sstatic.net/T51aP.png

现在就是这样，当右列中的框总体略高于左侧的框，左侧将出现一个新框，但其上方有一些空白以补偿高度差。如果右侧的盒子不会挡住左侧的盒子，那就太好了。

现在，恐怕如果不向每个盒子添加一些特定的类，这是不可能的，但你永远不知道人们可能会想出什么聪明的解决方案:)

Answer 1

对于这个问题，有几种使用 Javascript 进行布局的解决方案。其中之一是 Masonry，它是一个 jQuery 插件。您只需要做一些基本的 CSS：

.item {
    float: left;
    width: 200px;
}

然后像这样：

$('#container').masonry({
    itemSelector : '.item',
    columnWidth : 240
});

当然您将使用的选项可能会有所不同。

Answer 2

你应该将文章分成两个 div，否则你会得到空白。并排浮动两个 div，并用动态块交替填充它们。

<div class="column1">
    <article id="1">
    <article id="3">
</div>
<div class="column2">
    <article id="2">
    <article id="4">
</div>

Answer 3

经过更多研究，我发现了一个名为 column-width 或 column-count< 的 CSS 3 属性/a> 可以解决这个问题。目前大多数非 IE 浏览器都支持此功能，但基于 Gecko 和 WebKit 的浏览器需要分别使用前缀 -moz- 和 -webkit-。

我还没想出如何让它完美显示。在 Chromium 中，框可以在左列中被剪切，并在右列中继续，这对我的网站来说不太好。不幸的是，WebKit 还不支持break-inside，而且 -webkit-column-break-inside 也不能解决这个问题。在 Firefox 中，我可以通过设置固定宽度并将框向左浮动来解决此问题，但这确实破坏了 Chromium 中的功能。

所以，这不是一个完美的解决方案，但至少你可以进行浏览器嗅探，或者在某些情况下甚至可以进行优雅的降级，至少使它在 Gecko 中看起来更好一些。