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