jquery - 根据元素数量布置 HTML 元素

Question

问题是我必须从 2-4 个 html 视频元素进行布局，但数量是动态的，有时可以是 2、3 或 4 个元素。

对于 2，我会将它们并排放置，3 个元素将显示为“T”(我的意思是 2 个视频并排在上方，一个在中间下方)，4 个元素将显示为一个好莱坞正方形(上面并排 2 个，下面相同)。

元素就像这个一样，可以包裹在 div 或其他任何东西中:

<video id="streaming1" width="100%"  height=auto autoplay></video>
<video id="streaming2" width="100%"  height=auto autoplay></video>
...

问题是我不太确定我是否可以在这些视频元素中包含指令(但是可以在包含它们的 div 中包含指令)为什么我想直接在 Controller 中执行它(尽管我知道 DOM操作不应在 Controller 中完成，而应在指令中完成，但这就是我寻求帮助的原因)。

而且我不知道如何开始管理它，我迷路了，因为我对 angular/javascript 很陌生，而不是 css 专家。

Answer 1

这是使用 CSS 获得所需布局的一种方法。

如果您的 HTML 如下所示(分别针对 2、3 和 4 视频元素):

<div class="video-panel">
    <video id="streaming1" height=auto autoplay></video>
    <video id="streaming2" height=auto autoplay></video>
</div>

<div class="video-panel">
    <video id="streaming1" height=auto autoplay></video>
    <video id="streaming2" height=auto autoplay></video>
    <video id="streaming3" height=auto autoplay></video>
</div>

<div class="video-panel">
    <video id="streaming1" height=auto autoplay></video>
    <video id="streaming2" height=auto autoplay></video>
    <video id="streaming3" height=auto autoplay></video>
    <video id="streaming4" height=auto autoplay></video>
</div>

尝试遵循 CSS:

.video-panel {
    border: 1px dashed blue;
    text-align: center;
    margin-bottom: 2.00em; /* for demo only */
}
video {
    border: 1px dotted blue;
    width: 48%;
}

查看演示:http://jsfiddle.net/audetwebdesign/Um4mP/

如果您需要更好地控制 video 元素周围的边距，您可以将 display: inline-block 应用于 video CSS 规则并根据需要调整边距和填充。

需要注意的是 video 元素之间的任何空白，这会增加行的整体宽度。我使用 48% 而不是 50% 的宽度来避免由于任何空格(本例中的换行符)导致的意外换行。