Platzierung von videos nebeneinander mit Hilfe einer Tabelle

Muss ich meine videos nebeneinander. Dies ist mein HTML-code

<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>

Den videos erscheinen unter jedem anderen in meiner Webseite (vertikal)

Dies ist mein CSS-code

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

Nicht Schwimmer das video. Das macht keinen Sinn, und kann Probleme verursachen, in Ihrem layout.
nicht verwenden Tabellen für das layout entweder

InformationsquelleAutor Taolin | 2014-05-22

Sowohl den markup-und css-Probleme haben.

Zuerst müssen Sie jedes video in einem eigenen Zeile. Siehe die überarbeitete markup unten die zwei videos nebeneinander in jeder Zeile:

<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>

Nächsten, der css ein paar Dinge, die geändert werden müssen:

1) nicht Schwimmer das video. Das hat keinen Zweck, an dieser Stelle, da hast du schon bekommen Sie side-by-side mit Tabellen-Zellen:

2) Die video-div-container hat eine Breite von 300px, aber die videos selbst haben die Breite von 200px jeweils plus 20px linken Rand. Also, stellen Sie den container breiter (mindestens 440px, wahrscheinlich mehr, um zu ermöglichen, Polsterung, cellspacing, etc):

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

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

Und schließlich, nicht verwenden Tabellen für das layout. Sie sind sehr hart /spröde, und wirklich nicht gut mit responsive design.

Unten ist eine bessere Struktur für das, was Sie tun möchten:

<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>

Mit den folgenden 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%;
}

Was ist nett daran ist:

Können Sie schnell ändern, um eine 3, 4, 5, etc-Spalten-layout
Wenn die Breite des Bildschirms ändert sich, Sie hätte diese beginnen automatisch Stapel in weniger Spalten (gut für mobile, etc)
Revisionen einfach werden.

InformationsquelleAutor random_user_name

1

Weil der tag "Video" - ich gehe davon aus, dass Sie mit HTML5, so denke ich, konnte man eine weitere semantische Art und Weise, dies zu erreichen.

sowieso, das problem auf dein html-code ist in der Tabelle gibt es Zeilen und Spalten, und Sie sind mit zwei Reihen, das ist der Grund, warum die videos stapeln senkrecht, Sie können das Problem beheben, dass das löschen einer
"tr" - tag und umarmt beide videos nur mit einem von diesem tag.

es ist ein Beispiel;
```
<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/

auch Sie konnten mit html5; "Kapitel" und "Artikel" - tags, der zweite zu wickeln Sie die videos und dann stapeln waagerecht "display: inline-block"

Hoffe, dies hilft Ihnen.
- Danke @Xavier Mosh
InformationsquelleAutor Xavier Mosh

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