我无法将表格与html / css中的嵌入式视频对齐

Question

我的桌子位于页面的最左下方，但我希望它位于嵌入式视频的左侧，因为那里有很多空白空间。我不知道为什么它不会去那里。

我尝试在表的div中添加float: left;，但这只会使情况变得更糟。除此之外，我不知道该怎么尝试。

<iframe class="rightv" width="703" height="395" style="padding:1px; margin-top: 20px; border:10px solid black;" alt="playstyle" src="https://www.youtube.com/embed/-bK3OlP3eSE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

<div>
  <h2>Types of Decks</h2>

  <table>
    . . .
  </table>
</div>

Answer 1

尝试一下。

.flex-container {
  display: flex;
}

<div class="flex-container">
  <div>           
    <h2>Types of Decks</h2>

    <table>
      <tr>
        <td>First Column</td>
        <td>Second Column</td>
        <td>Third Column</td>
        <td>Fourth Column</td>
      </tr>
    </table>
  </div>

  <iframe class = "rightv" height="395" style="padding:1px; margin-top: 20px; border:10px solid black;" alt = "playstyle" src="https://www.youtube.com/embed/-bK3OlP3eSE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer 2

一种可能是将表格绝对放置在iframe旁边。

table {
    position: absolute;
    left: 0;
    top: 20px;
}