将两个元素放置在同一行

Question

将两个元素放置在同一行

3

我试图在一个div中同时放置一个iframe和img，但是我的代码会让img在iframe的下面。我尝试了使用position和float来调整元素的位置，但是都没有奏效。我也查阅了其他Stack Overflow的帖子，但是也没有成功。如果需要的话，我愿意从头开始。

如果有人能够指出我的错误并告诉我如何更正以使其工作，我将不胜感激。我已经查看了其他帖子，但是似乎都不起作用。

谢谢。

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

- user1532468

你能否设置一个 JSFiddle 来演示你的问题？ - Vishwas Singh Chouhan

我刚刚创建了一个JSFiddle，可以在同一个div上看到两个元素。也许问题是你正在使用一个media-quary，它会使它倾斜以适应你的显示器？ - ZombieChowder

僵尸：我已经删除了媒体查询，但它仍然显示图像堆叠而不是内联。谢谢。 - user1532468

在fiddle中发布相关代码。 - Rahul

我使用 Bootstrap 轻松解决了你的问题。你是否同意使用 Bootstrap？ - ZombieChowder

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hidden Hobbes · Accepted Answer

问题

问题在于.inner的宽度为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

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

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

选项二

在.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: 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>