Html CSS：无法将图像定位在特定位置

我试图将背景图像放置在不同块元素（视频对象）的同一行的div元素中，但它不会上升以与对象对齐。（右下角的蛋糕横幅不会升起）

任何关于我做错了什么的帮助或见解都将不胜感激

这是我在该部分的HTML代码：

<div id="bottom">
   <div id=video>
       <h2>Weekly Inspiration Song</h2>
          <p>Every morning, as we get up and bake all the goodies for you, 
             we get inspired by great music!</p> 
          <p>We want to share our inspiration with you, so we will update 
            this section with our favorite inspiration song weekly.</p> 
      <p>We hope you enjoy it like we do!</p>
       <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" 
               height="315"></object>
       <br />
   </div>
   <div id="bottombanner">
     <a href="menu.htm"></a>
   </div>
</div>

---

如果您只是删除

，它将完全对齐；p

首先，我建议您在调试代码时尝试右键单击检查元素。您可以在浏览器控制台中突出显示DOM，并查看元素在页面上占据的空间。这将很好地提示您从何处开始更改代码

我注意到您的代码存在以下问题：

您将

对象

向左浮动，这会导致

#底部横幅

跳到右侧，但实际上您并没有浮动

#底部横幅

本身

#bottombanner

与您的

对象不在同一父对象中，这将使您很难在不进行超出实际需要的黑客攻击的情况下完成您正试图执行的操作

因此，我们应该做的第一件事是将

#bottombanner

移动到

#video

内部

然后，取消

#video

上的宽度，使其宽度为

99%

宽度（因为它有

1%

左边距）。将该

宽度：35%

应用于您的

对象

然后，将

对象

和

底部横幅

浮动到左侧。当

对象
位于
宽度：35%
且容器位于
宽度：99%
时，剩下
64%
作为
底部横幅的宽度

另外，删除
对象上的
显示：内联块
<代码>显示：内联块
和
浮点：左
是相互矛盾的语句；不能浮动内联元素

完整代码如下。我没有包含堆栈片段，因为似乎YT视频没有加载到片段中，所以无论如何，你都无法真正看到完整的效果

HTML

<div id="bottom">
  <div id=video>
    <h2>Weekly Inspiration Song</h2>
    <p>Every morning, as we get up and bake all the goodies for you, we get inspired by great music!</p>
    <p>We want to share our inspiration with you, so we will update this section with our favorite inspiration song weekly.</p>
    <p>We hope you enjoy it like we do!</p>
    <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" height="315"></object>
    <div id="bottombanner">
      <a href="menu.htm"></a>
    </div>
  </div>
</div>

要并排设置两个容器，您可以使用display:
表格
、
柔性
、
网格
或
内联块

另外，注意你的宽度（560像素和35%）可能并不总是匹配


flex
，最简单的：


div#视频{
宽度：35%；
最小宽度：560px；
剩余利润：1%
}
视频h2{
保证金：0；
填充：0px；
字体系列：“Stagssans Book Web”，无衬线；
}
电视节目组{
宽度：560px；
字体大小：16px；
字体系列：“Stagssans Book Web”，无衬线；
}
div#视频对象{
浮动：左；
}
分区a{
背景图像：url（“http://lorempixel.com/400/500/nature");
背景位置：右上角；
背景重复：无重复；
不透明度：0.9；
左缘：1.5%；
填充：0；
宽度：1250px；
高度：400px；
背景尺寸：封面；
浮动：左；
}
/*用于演示，以避免浮动到包装*/
#底部{显示：flex；
}

每周灵感之歌
每天早上，当我们起床为你烤好所有的食物时，我们都会从美妙的音乐中得到灵感

我们想与您分享我们的灵感，因此我们将每周更新我们最喜欢的灵感歌曲

我们希望你像我们一样喜欢它

你真的应该仔细阅读css4网格，布局不应该弄糟。我想这张屏幕抓图总结了一下。你想让我键入一种对齐方式，还是自己尝试一下？@SamApostel谢谢你。我知道问题出在哪里了，我已经尝试过将这一部分缩小，但右侧的横幅仍然无法对齐。如果y您可以键入一种对齐方式，我将非常感谢！删除
我感谢所有的帮助，伙计们！删除
确实使横幅与视频对齐，但我希望它与视频对齐。对不起，我不清楚@SamApostel@GCyrillus我知道
<div id="bottom">
  <div id=video>
    <h2>Weekly Inspiration Song</h2>
    <p>Every morning, as we get up and bake all the goodies for you, we get inspired by great music!</p>
    <p>We want to share our inspiration with you, so we will update this section with our favorite inspiration song weekly.</p>
    <p>We hope you enjoy it like we do!</p>
    <object data="http://www.youtube.com/embed/Ti7KWbicqcg" width="560" height="315"></object>
    <div id="bottombanner">
      <a href="menu.htm"></a>
    </div>
  </div>
</div>

div#video {
  /*width: 35%;*/
  margin-left: 1%
  width: 99%;
}
div#video h2 {
  margin: 0;
  padding: 0px;
  font-family: 'StagSans-Book-Web', sans-serif;
}
div#video p {
  width: 560px;
  font-size: 16px;
  font-family: 'StagSans-Book-Web', sans-serif;
}
div#video object {
  /*display: inline-block;*/
  float: left;
  width: 35%;
}
div#bottombanner {
  float: left;
  width: 64%;
}
div#bottombanner a {
  background-image: url("http://placehold.it/720x560");
  background-position: right center;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  display: inline-block;
  float: left;
}