Question

我正在尝试将两个div（一个嵌入了YouTube视频放在图像上，另一个是文本）并排放置。我通常会使用float: left;规则执行此操作，但是对于图像上的视频，使用CSS / HTML组合会更加棘手。

我该怎么做呢？

我的代码：

.backgroundimage {
  position: relative;
  top: 70px;
  right: 390px;
  float: left;
}
.Youtube {
  position: absolute;
  left: 280px;
  bottom: 46px;
}

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  <p>Hi, this is some test text!</p>
</div>

Answer 1

Check this JSFiddle看到它嗖嗖。

所以我认为您可以使用CSS属性在后台显示图像，而不是使用<img/>。 CSS代码：

.backgroundimage {
  position: relative;
  background: url("http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png") no-repeat;
  height:329px;
}
.Youtube {
  position: absolute;
  left:10px;
  top:10px;
} 
p{
  position: absolute;
  right:0;
  width:140px;
}

已修改检查this JSFiddle是否有回复文字

Answer 2

在页面上使用bootstrap。在网站上抓住引导程序CND ..

http://getbootstrap.com/getting-started/

现在试试这个..

<div class="container">
    <div class="row">
        <div class="col-sm-6">
           <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
           <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="col-sm-6">
            <p>Hi, this is some test text!</p>
        </div>
    </div>
</div>

Answer 3

使用display: inline-block代替float: left

.backgroundimage {
  position: relative;
  top: 70px;
  right: 390px;
  display: inline-block;
}
.Youtube {
  position: absolute;
  left: 500px;
  bottom: 46px;
}

<div class="backgroundimage">
  <img src="http://truespeed.ca/wp-content/uploads/2016/06/tvscreen.png" alt="null" />
  <iframe class="Youtube" width="479" height="269" src="https://www.youtube.com/embed/6ydYvG52K-E" frameborder="0" allowfullscreen></iframe>
  <p>Hi, this is some test text!</p>
</div>

在Div旁边写作

3 个答案: