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

【问题标题】：Floating a video to the right side of my webpage将视频浮动到我的网页右侧
【发布时间】：2021-10-27 03:10:31
【问题描述】：

我正在制作一个课程网页，我们正在学习如何将视频放到我们的网站上。我们不使用 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;
}

【问题讨论】：

在 jsFiddle 中放置一个您的问题的工作示例。您将更有可能从您的受众那里获得有效的解决方案。 jsfiddle.net
刚刚为他/她做的：jsfiddle.net/L6frz2jt

标签： html css html5-video

【解决方案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;

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

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

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

【讨论】：

【解决方案2】：

专注于这些事情；

首先添加display:inline-block；到包含所有
标签（即出现在
之后），以便它们仅占用它所在的空间。

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

【讨论】：