Question

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

2我会将它们并排放置，3个元素将显示为“T”（我的意思是并排显示2个视频，中间位于下方），4个元素将显示为一个好莱坞广场（上面两个并排，下面相同）。

元素将像这样，并且可以包含在div或其他任何内容中：

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

问题是我不确定我是否可以在这些视频元素中包含指令（但是在包含它们的div中是的）为什么我可能想直接在控制器中执行它（尽管我知道DOM操纵不应该在控制器而是指令中进行，但这就是我寻求帮助的原因。）

而且我不知道如何开始管理这个，我失去了因为我对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％的宽度来避免由于任何空格而导致的意外包装（本例中的行返回）。

Answer 2

工作演示： http://jsfiddle.net/4Th4j/

HTML：

<div class="vid">
    <div class="one">
        <img src="http://www.placehold.it/350x150"/>
    </div>
    <div class="two">
        <img src="http://www.placehold.it/350x150"/>
    </div>
</div>
<div class="vid">
    <div class="three">
        <img src="http://www.placehold.it/350x150"/>
    </div>
    <div class="four"></div>
</div>

CSS：

.vid{
    background:#dadada;
    width:50%;
    text-align:center;
    overflow:hidden;
}
.one,.two,.three,.four{
    width:50%;
    background:#eaeaea;
    display:inline;
    text-align:center;
    font-size:0px;
}
img{
    border:none;
    width:50%;
    vertical-align: middle;
}

您可以在此处将<img>或<video>标记放在一个，两个，三个或四个div中。它将自动居中，只有一个元素的元素在行中。

Answer 3

这个问题有很多解决方案。

我猜你是从一些后端拉出视频？

因此我会使用angulars ngRepeat指令为元素赋予不同的类，这取决于元素的总数。

从这里开始，我将使用相关的CSS分配这些类，以获得所需的布局。

请参阅https://docs.angularjs.org/api/ng/directive/ngRepeat

根据元素的数量布置HTML元素

3 个答案: