Question

我有一排像这样的视频：

<!-- Video #1 Start -->
<video width="30%" controls>
    <source src="videos/video1.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #1 End -->

<!-- Video #2 Start -->
<video width="30%" controls>
    <source src="videos/video2.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #2 End -->

<!-- Video #3 Start -->
<video width="30%" controls>
    <source src="videos/video3.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #3 End -->

我正在尝试为每个视频添加标题，以便布局如下：

Title #1    Title #2    Title #3
Video #1    Video #2    Video #3

这是我最好的尝试，尽管失败了：

<!-- Video #1 Start -->
<h3>Video #1</h3>
<video width="30%" controls>
    <source src="videos/video1.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #1 End -->

<!-- Video #2 Start -->
<h3>Video #2</h3>
<video width="30%" controls>
    <source src="videos/video2.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #2 End -->

<!-- Video #3 Start -->
<h3>Video #3</h3>
<video width="30%" controls>
    <source src="videos/video3.mp4"
            type="video/mp4">
    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #3 End -->

如何在保持所需布局的同时为每个视频添加标题？

Answer 1

删除了所有以前的代码。这是一个看起来有效的片段，我删除了src属性以使jsfiddle工作。

试试这个：http://jsfiddle.net/ue8e1004/

<h3 style="width: 30%;float:left;">Your title.</h3>
<h3 style="width: 30%;float:left;">Your title.</h3>
<h3 style="width: 30%;float:left;">Your title.</h3>
<div class="clearfix"></div>
<!-- Video #1 Start -->

<video width="30%" controls>

    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #1 End -->

<!-- Video #2 Start -->

<video width="30%" controls>

    You should be seeing a video right now, but we have failed as webmasters.
</video>
<!-- Video #2 End -->

<!-- Video #3 Start -->

<video width="30%" controls>

    You should be seeing a video right now, but we have failed as webmasters.
</video>

如何为一行视频中的每个视频添加标题？

1 个答案: