HTML:如何将我的视频右对齐并在左侧放置文本？

Question

我的 html 文件中有以下代码:

  <video 
     src="finalvid.mp4"
     preload="auto"
     width="320"             
     heigth="240"
     align="right"             
     controls
     loop>
  </video>

首先，我尝试将其右对齐。显然 align="right"部分不起作用(可能它不属于那里)。我正在搜索视频标签以放入 css 文件，但我没有找到任何东西。 其次，我想在视频的左边放一段话。基本上，要有两列，第一列(左)是文本，第二列(右)是视频。

Answer 1

将每一边包裹在一个 block 元素(例如 div、部分等)中，然后用一个“flex 容器”包裹它们，这是一个带有 display:flex 的元素。默认情况下， flex 容器会将其子容器排成一行。

演示

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section {
  width: 50%;
  height: 100%;
}

video {
  width: 100%;
  height: 56.25%;
  margin-top: 21.875%;
}

<main class='main'>

  <section class='left section'>

    <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the gre</p>

  </section>
  <section class='right section'>

    <video src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' controls></video>

  </section>

</main>