我有一个3列的布局，我想要填充可变数量的视频（通常是3的倍数）。我希望这些视频能够以各种高度相同的方式在列中进行分配。
如果我使用6,9或12作为视频数量，这不是问题，但如果我将其设置为3，则列不能正确分发，如下所示：
Column 1 | Column 2 | Column 3
[video 1] [video 3]
[video 2]
它应该在哪里：
Column 1 | Column 2 | Column 3
[video 1] [video 2] [video 3]
这是我应该使用表格的东西吗？我过去遇到了麻烦，这就是我在这个例子中选择了专栏的原因，但是现在我已经打了一个墙......我目前正在使用列宽来保持响应友好，我不确定这在桌面布局中究竟是如何工作的。
我的HTML是这样的：
<div id="videoContainer">
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
</div>
使用这样的CSS：
#videoContainer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 300px;
-moz-column-width: 300px;
column-width: 300px;
}