写在旁边

我试图让两个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>

来源

2016-09-28 Thomas Hutton

我没有看到你的HTML代码中的任何文本。 –

我给它增加了一些文字。谢谢你告诉我！ –

请检查我发布的答案中的代码。 –

Check this JSFiddle看到它打开。

所以我认为，而不是使用<img/>你可以使用CSS属性来在后台显示图像。 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的响应文本

来源

2016-09-28 18:21:22

对不起，它不起作用。我的所有角色都是垂直的，然后进入页脚。 –

只需评论或从'.backgroundimage'中删除：'width：505px;'。我忘了在发布链接之前更新小提琴。 –

完美！你是男人！ –

使用引导。抢引导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>

来源

2016-09-28 17:41:07

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

来源

2016-09-28 17:47:31

回答

相关问题