高度扩展的文章元素正在向下推下每一行和每一列中的其他文章元素

Question

我有一个文章元素的栅格，每个元素都代表一个事件。通过复选框 hack，每个事件的附加内容被展开并在鼠标单击时显示。问题是：

是否有可能只有展开文章正下方的同一列中的文章被下推，而不是其他列中的文章（如事件 4，红色的那一个）？

示例（使用 sass、指南针和奇异性）保存为 gist https://gist.github.com/rpkoller/678e30212e9da8b41619 在 sassmeister 上是 http://sassmeister.com/gist/678e30212e9da8b41619（sassmeister 示例还存在一些 clearfix 问题，但在本地使用相同的代码不会发生）

目前我不知道如何解决该问题。每个提示都值得赞赏。最好的问候拉尔夫

Answer 1

这正是网格布局应该如何工作的。首先元素按行排列，然后行垂直堆叠。

您似乎想要相反的情况：元素以列形式形成，然后列水平堆叠。使用 HTML/CSS，这只有在您知道网格中元素的确切数量时才有可能。为每一列创建一个容器，将它们与 Singularity 对齐并将元素分配到容器中。

如果您希望它适用于任意数量的元素，则必须使用动态对齐它们的 JS 库。有几十个这样的库。最著名的是Masonry，但它不一定是最好的。我喜欢的是Salvattore，因为它可以让你利用 CSS 来布置你的网格。