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

Question

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

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

该示例（使用 sass、指南针和奇异性）保存为要点https://gist.github.com/rpkoller/678e30212e9da8b41619 ，在 sassmeister 上为http://sassmeister.com/gist/678e30212e9da8b41619（sassmeister示例也受到影响除了在本地没有使用相同代码发生的一些 clearfix 问题）

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

Answer 1

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

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

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