将两个元素内联放置

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的{​​{1}} width正在将图片推送到新行。如果您将背景颜色和高度添加到49%，则可以看到这一点。

＆＃13;

＆＃13;

.inner

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何修复

选项1

将<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>添加到whitespace: nowrap;以阻止图片能够换行到下一行

＆＃13;

＆＃13;

.holder

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

选项2

在<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>上设置较大的width。

＆＃13;

＆＃13;

.inner

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;