html - 内联放置两个元素

Question

我正在尝试将 iframe 和 img 内嵌到 div 中。我发布的代码将 img 放在 iframe 下方。我已经尝试过 position 和 float 元素，但似乎没有任何效果。我还查看了关于 SO 的其他帖子，但似乎没有任何效果。如果需要，我愿意从头开始。

如果有人能指出我的错误并告诉我如何更正以使其正常工作，我将不胜感激。我看过其他帖子，但似乎没有任何效果。

谢谢。

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.hero-unit {
  background-color: #000000;
  border: 1px solid #252525;
  margin-bottom: 30px;
}
.hero-unit img {
  display: inline-block;
}
.fp-block {
  padding: 5px !important;
  padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/

.inner {
  float: left;
  width: 49%;
  margin: 0;
}
.holder {
  height: 0px;
  width: 100%;
}

<div class="container">
  <div class="hero-unit fp-block">
    <div id="ut-wrap">
      <div class="inner">
        <div class="holder">
          <iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
          <img src="http://placehold.it/150x150">
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

问题

问题是 .inner 的 width 为 49%，这会将图像推到新的一行。如果您向 .inner 添加背景颜色和高度，则可以看到这一点。

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.hero-unit {
  background-color: #000000;
  border: 1px solid #252525;
  margin-bottom: 30px;
}
.hero-unit img {
  display: inline-block;
}
.fp-block {
  padding: 5px !important;
  padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/

.inner {
  float: left;
  width: 49%;
  margin: 0;
  background-color: red;
  height: 100px;
}
.holder {
  height: 0px;
  width: 100%;
}
iframe {
  opacity: 0.5;
}

<div class="container">
  <div class="hero-unit fp-block">
    <div id="ut-wrap">
      <div class="inner">
        <div class="holder">
          <iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
          <img src="http://placehold.it/150x150">
        </div>
      </div>
    </div>
  </div>
</div>

如何修复

选项1

将 whitespace: nowrap; 添加到 .holder 以阻止图像换行到下一行

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.hero-unit {
  background-color: #000000;
  border: 1px solid #252525;
  margin-bottom: 30px;
}
.hero-unit img {
  display: inline-block;
}
.fp-block {
  padding: 5px !important;
  padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/

.inner {
  float: left;
  width: 49%;
  margin: 0;
}
.holder {
  height: 0px;
  width: 100%;
  white-space: nowrap;
}

<div class="container">
  <div class="hero-unit fp-block">
    <div id="ut-wrap">
      <div class="inner">
        <div class="holder">
          <iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
          <img src="http://placehold.it/150x150">
        </div>
      </div>
    </div>
  </div>
</div>

选项 2

在 .inner 上设置更大的 width。

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}
.hero-unit {
  background-color: #000000;
  border: 1px solid #252525;
  margin-bottom: 30px;
}
.hero-unit img {
  display: inline-block;
}
.fp-block {
  padding: 5px !important;
  padding: 0;
}
/*** CUSTOM CODE FOR YOUTUBE VIDEO DISPLAY ***/

.inner {
  float: left;
  width: 100%;
  margin: 0;
}
.holder {
  height: 0px;
  width: 100%;
}

<div class="container">
  <div class="hero-unit fp-block">
    <div id="ut-wrap">
      <div class="inner">
        <div class="holder">
          <iframe src="https://www.youtube.com/embed/_VRXrp_AfMM" frameborder="0" allowfullscreen></iframe>
          <img src="http://placehold.it/150x150">
        </div>
      </div>
    </div>
  </div>
</div>