Question

我试图将背景图像放置在不同块元素（视频对象）的同一行中的div元素中，但它不会上升到与对象对齐。 Here's a screen shot of how it looks now（右下方的蛋糕横幅不会上升）。

对我所犯错误的任何帮助或见解将不胜感激！

这是该部分的 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>

这是我的 CSS ：

div#video {
 width: 35%;
 margin-left: 1%
}


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;
}


div#bottombanner a {
  background-image: url("cakebanner.jpg");
  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;
}

Answer 1

要将两个容器并排设置，您可以使用展示广告：table，flex，grid或inline-block。

另外，请注意你的宽度（560px和35％可能并不总是匹配。

flex，最简单的：

＆＃13;

div#video {
  width: 35%;
  min-width:560px;
  margin-left: 1%
}

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 {
  float: left;
}

div#bottombanner a {
  background-image: url("http://lorempixel.com/400/500/nature");
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  float: left;
}

/* for demo to avoid float to wrap */
#bottom {display:flex;
}

＆＃13;

<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>
  <div id="bottombanner">
    <a href="menu.htm"></a>
  </div>
</div>

＆＃13;

＆＃13; * display:table/table-cell 适用于旧版浏览器，例如IE8 ....

＆＃13;

div#bottom {
  display: table;
}

div#video,
div#bottombanner {
  display: table-cell;
  vertical-align:top;
}

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 {
  float: left;
}

div#bottombanner a {
  background-image: url("http://lorempixel.com/400/500/nature");
  background-position: top right;
  background-repeat: no-repeat;
  opacity: 0.9;
  margin-left: 1.5%;
  padding: 0;
  width: 1250px;
  height: 400px;
  background-size: cover;
  float: left;
}


/* for demo to avoid float to wrap */

body {
  min-width: 2000px;
}

＆＃13;

<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>

＆＃13;

这些是最简单，最css的两种方式。

内联块需要一些额外的调整，网格还没有很好地实现，但也很容易使用。

关于float，请注意使用时的block formatting context副作用。

Answer 2

http://imgur.com/a/BJUfh

如果您只是删除它<br>它完全对齐; p

Answer 3

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

以下是我在您的代码中发现的问题：

你左移object，导致#bottombanner跳到右边，但你实际上并没有自己浮动#bottombanner。
#bottombanner与您的object不在同一个父级中，这将使你很难做到你想要做的事情，而不会破坏你真正需要的东西。

所以我们应该做的第一件事是在#bottombanner内移动#video。

然后，取消#video上的宽度并使其宽99%（因为它有一个1%左边距）。取一下width: 35%，然后将其应用到object。

然后，将object和#bottombanner向左浮动。如果object位于width: 35%且您的容器位于width: 99%，则64%的宽度为#bottombanner。

另外，请移除display: inline-block上的object。 display: inline-block和float: left是相互矛盾的陈述;你不能浮动一个内联元素。

完整代码如下。我没有包含一个堆栈片段，因为看起来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>

<强> CSS

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;
}

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

3 个答案: