我有一个 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;
}
链接到 JSFiddle
如果您将以下内容添加到 #videoContainer 它应该可以工作
display: flex;