寫在旁邊

我試圖讓兩個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

回答

相關問題