将视频浮动到我网页的右侧

Question

我正在为 class 制作网页，我们正在学习如何将视频放到我们的网站上。我们不只是使用 JS CSS 和 HTML。我知道如何让照片向右浮动，但出于某种原因我也无法获取视频。我把它放在了页面的右侧，但它只是搞砸了布局并将我的页脚移到页面上更高的位置，然后它应该是。 CSS 用于 2 个网页，所以如果它看起来有不属于的东西，这就是原因。这也不是来自 youtube 的视频。我见过的大多数例子都在解释这一点，但不完全是我遇到的问题

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Pacific Trails Resort</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assignment8.css" type="text/css">  
</head> 
<body>
<div id="containerptr">
<header> 
 <h1>John's Favorite Vacay Destinations</h1>
</header>
<main>
  <nav>
    <ul>
      <li><a href="assign8_home.html">Home</a></li>
      <li><a href="assign8_ptr.html">Pacific Trails</a></li>
    </ul>
  </nav>
  <h2>Pacific Trails Resort</h2>
  <p>
  Pacific Trails Resort offers a special lodging experience on the California North Coast. 
Relax in serenity with panoramic views of the Pacific Ocean.
  </p>
  <ul>
    <li>Private yurts with decks overlooking the ocean</li>
    <li>Activities lodge with fireplace and gift shop</li>
    <li>Nightly fine dining at the Overlook Cafe</li>
    <li>Heated outdoor pool and whirlpool</li>
    <li>Guided hiking tours of the redwood</li>
  </ul>
  <video controls="controls"
         poster="pacifictrailsresort.jpg"
         width="320" height="240">
    <source src="pacifictrailsresort.m4v" type="video/mp4">
    <source src="pacifictrailsresort.ogv" type="video/ogg">
    <a href="pacifictrailsresort.jpg">Pacific Trails Resort</a>(.m4v)
  </video>
</main>
</div>
<footer><p>Copyright &copy; 2021 <a href="mailto:edjones@mail.mccneb.edu">Eric Jones</a></p> 
</footer>
</body> 
</html>

CSS:

body {
    font-family: cursive;
    margin: 0px 0px 0px 0px;
    background-image: linear-gradient(#7dafff, #f7f7f7);
}

#container {
    width: 960px;
    padding: 50px 50px 50px 50px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 0px #1e1e1e;
    border-radius: 15px 15px 15px 15px;
    background-image: url(lightbluebkg.jpg);
}
#containerptr {
    width: 960px;
    padding: 50px 50px 50px 50px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 5px #1e1e1e;
    border-radius: 15px 15px 15px 15px;
    background-image: linear-gradient(#4fb377, #f7f7f7);
}

h1 {
    font-family: cursive;
    text-align: center; 
}
h2 {
    font-family: fantasy;
    text-shadow: 2px 0px white;
}

nav a:link {
    color: #05116b;
}
nav a:visited {
    color: #0041a8;
}
nav ul {
    list-style-type: none;
    text-align: center;
}
nav li {
    display: inline;
    padding-left: 15px;
}

img {
    margin: 0 15px
}

.photo {
    float: right;
    transform: rotate(4deg);
}

video {
    float: right;
}

footer {
    font-size: .7em;
    text-align: center;
    border-top: 1px solid #003366;
    background-color: #BACBE0;
    padding-bottom: 5px;
    padding-top: 5px;
}

Answer 1

我知道您的问题是什么，当您将视频向右浮动时，它会弄乱下面的页脚...将此添加到页脚上方和主下方的 html...

</main>
    <div class= "clr"> </div>
</div>
<footer><p>Copyright &copy; 2021 <a href="mailto:edjones@mail.mccneb.edu">Eric Jones</a></p> 
</footer>

现在将此选择器添加到您的 css 文件....

.clr{
    clear: both;

这可能会解决您的问题..

这个问题是怎么解决的 --> 当你浮动你的元素时，你实际上命令它们下面的元素与浮动的元素重叠

因此，当您使用清除两个选择器添加此 clr div 时，您是在告诉下面的元素不要与上面的元素重叠

Answer 2

关注这些事情；

首先添加display:inline块；到包含所有
标签的标签（即出现在
之后），以便它们仅在它出现的地方消耗那么多 space。

2.and 然后为您添加高度 #containerptr 这样视频就不会覆盖您的页脚

将视频浮动到我网页的右侧

Floating a video to the right side of my webpage

html

css

html5-video