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

Question

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

以某种方式可能只有扩展文章下方同一列中的文章被推下而其他列中的文章也没有被推下（如事件4，红色文章）？

示例（使用sass，指南针和奇点）保存为要点https://gist.github.com/rpkoller/678e30212e9da8b41619 并且在sassmeister上它是http://sassmeister.com/gist/678e30212e9da8b41619（sassmeister示例也有一点clearfix问题，不会在本地用相同的代码发生）

目前我没有想法如何解决这个问题。每个提示都很受欢迎。最好的问候拉尔夫

Answer 1

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

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

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