CSS 列中的视频排列不正确

Question

我有一个 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]

这是我应该使用 table 代替的东西吗？过去我遇到过麻烦，这就是为什么我在这种情况下选择了列，但现在我遇到了一些困难......我目前正在使用 column-width 来保持响应友好，我不确定它在 table 布局中的具体工作方式。

我的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;
}

Answer 1

Link to JSFiddle

如果您将以下内容添加到 #videoContainer，它应该可以工作

display: flex;

CSS 列中的视频排列不正确

Videos in CSS columns not arranging correctly

html

css

video-streaming

css-multicolumn-layout