Question

我需要我的视频水平相邻。这是我的HTML代码

<div id="videoal">
<table>
<tr><td>
  <video width="200" height="200" controls>
    <source src="Videos.mp4" type="video/mp4">
    <source src="Videos.ogg" type="video/ogg">
  </video>
  </td></tr>
  <tr><td>
  <video width="200" height="200" controls>
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.ogg" type="video/ogg">
  </video>
  </td></tr>
  </table>
</div>

视频在我的网页（垂直）中显示在彼此之下

这是我的CSS代码

#videoal video
{
  margin: 30px 0px 0px 20px;
  float: left;
 }
 #videoal
 {
  margin: 50px 20px 10px 20px; /*TRBL*/
  width: 300px;
  }

Answer 1

标记和你的CSS都有问题。

首先，您拥有自己的每一个视频行。请参阅下面的修订标记，该标记将在每行中并排放置两个视频：

<div id="videoal">
<table>
    <tr>
        <td>
            <video width="200" height="200" controls>
                <source src="Videos.mp4" type="video/mp4">
                <source src="Videos.ogg" type="video/ogg">
            </video>
       </td>
       <td>
           <video width="200" height="200" controls>
              <source src="Video.mp4" type="video/mp4">
              <source src="Video.ogg" type="video/ogg">
           </video>
       </td>
    </tr>
</table>
</div>

接下来，css有一些需要改变的地方：

1）不要浮动视频。在这一点上，这没有任何意义，因为你已经将它们与表格单元并排：

2）视频容器div的宽度为300px，但视频本身的宽度分别为200px，加上20px的左边距。因此，使容器更宽（至少440px，可能更多以允许填充，cellspacing等）：

#videoal video {
     margin: 30px 0px 0px 20px;
 }

 #videoal {
     margin: 50px 20px 10px 20px
     width: 440px;
 }

最后，不要使用表格进行布局。它们非常坚硬/脆弱，并且在响应式设计方面做得并不好。

以下是您想要做的更好的结构：

<div id="videoal">
    <div class="video">
        <video controls>
            <source src="Videos.mp4" type="video/mp4">
            <source src="Videos.ogg" type="video/ogg">
        </video>
    </div>
    <div class="video">
       <video controls>
           <source src="Video.mp4" type="video/mp4">
           <source src="Video.ogg" type="video/ogg">
       </video>
    </div>
</div>

使用以下css：

#videoal {
    /* ... put any margin, padding, etc. here you like */
}

#videoal div.video {
    display: inline-block;
    zoom: 1;
    *display: inline;
    width: 200px;
    height: 200px;
    margin: 0 10px 10px 0;
}

#videoal div.video video {
    width: 100%;
    height: 100%;
}

这有什么好处：

您可以快速将其更改为3,4,5等列布局
如果屏幕的宽度发生变化，您可以让它们自动堆叠成更少的列（适合移动设备等）
修改变得简单。

Answer 2

由于标签“Video”我假设您使用的是HTML5，因此，我认为您可以找到一种更加语义化的方式来实现这一目标。

无论如何，你的html代码问题出现在表格中，有行和列，而你正在使用两行，这就是视频垂直堆叠的原因，你可以修复删除一行 “tr”标记并仅使用此标记之一包含两个视频。

有一个例子;

<div id="videoal">
<table>
<tr>
  <td>
  <video width="200" height="200" controls>
    <source src="Videos.mp4" type="video/mp4">
    <source src="Videos.ogg" type="video/ogg">
  </video>
  </td>
  <td>
  <video width="200" height="200" controls>
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.ogg" type="video/ogg">
  </video>
  </td>
  </tr>
  </table>
</div>

http://jsfiddle.net/B6j2v/

你也可以使用html5; “section”和“article”标签，第二个包装视频，然后水平堆叠“display：inline-block”

希望这对你有所帮助。

Answer 3

html

<div id="videoal">
    <table>
    <tr>
      <td>
      <video width="200" height="200" controls>
        <source src="Videos.mp4" type="video/mp4">
        <source src="Videos.ogg" type="video/ogg">
      </video>
      </td>
        <td>
      <video width="200" height="200" controls>
        <source src="Videos.mp4" type="video/mp4">
        <source src="Videos.ogg" type="video/ogg">
      </video>
      </td>
        </tr>
      </table>
    </div>

<强> CSS

#videoal video
{
  margin: 30px 0px 0px 20px;
  float: left;
 }
 #videoal
 {
  margin: 50px 20px 10px 20px; /*TRBL*/
  width: 300px;
  }

DEMO

使用表格将视频放在一起

3 个答案: