在我的<main>元素中，我有 div，每个都有 class .dataCard。每个.dataCard都有相同的最小尺寸，但是当我开始向.dataCards 添加内容时，我注意到布局表现得很奇怪。
该<main>元素分为两列，每列包含一个.dataCard. 我这样做是因为我需要按.dataCard左列的顺序，然后是右列的一个，左列的一个，依此类推。
但是当我用内容填充.dataCards 时，它们会将所有其他卡片推到它们下面。
如何用.dataCards 填充可用空间，以使<main>包含它们的元素的高度尽可能小。
现在，在下面的链接中，右栏中有第二张卡片，但随后是一堆空格，在第二张卡片的末尾，左栏中的第三张卡片开始了。
如何将左列向上移动，或者换句话说，使卡片适合使用或不使用 flexbox 的可用空间？
我将不胜感激任何和所有的帮助！
这是链接：https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html