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

Question

我的 table 位于我页面的最左下角，但我希望它位于嵌入视频的左侧，因为那里有很多空白 space。我不明白为什么它不会去那里。

我试过在 table 上的 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

一种可能是将您的 table absolute 放在 iframe 旁边。

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

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

I'm having trouble aligning my table with an embedded video in html/css

html

css

css-position