Question

现在，它刚刚到达底部。这是我的代码：

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <!-- <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video> -->
    <img src="https://via.placeholder.com/700x400?text=Placeholder+Video" />
  </div>
</div>

我希望文本在文本处，但转至此处。（参见图片）：

链接到我的HTML和CSS： https://codeshare.io/5XqAeE

Answer 1

假设“机器学习与开发”是您想要在视频上方显示的文字，则可以使用flexbox实现这一目标！

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

，然后尝试从保存视频的div中删除text-align: left。

Answer 2

请只看下面与您相同的示例：

<!DOCTYPE html>
<head>
    <style>
    img {
      float: left;
    }
    </style>
</head>

<body>
    <div class="container">
      <h1 class="text-center">Machine Learning and Development</h1>
      <div >
        Hello
        <!-- <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video> -->
        <img src="your_image_path_will_go_here" style="width:300px;height:300px;margin-left:15px;"/>
      </div>
    </div>
</body>

如何将我的文字放在div的顶部而不是底部？

2 个答案: