對齊圖片旁邊嵌入視頻上的降價文件

我試圖將圖像從旁邊的YouTube我降價文檔中嵌入視頻，使用下面的語法對齊圖片旁邊嵌入視頻上的降價文件

<iframe width="450" height="315" src="https://www.youtube.com/embed/2qXhBIHlfaM" frameborder="0" allowfullscreen></iframe> 
<img src="/pictures/colour_bar.png" width="200" height="315" align="right" />

原來圖像是如視頻下：

this

有人可以告訴我，我怎麼可以把使用HTML的降價文件中的視頻旁邊的這個形象？

來源

2016-03-01 Adi

iframe有自己的路線的原因是iframe默認爲'display：block'（並且img元素默認爲'display：inline'）。我會建議風格/ CSS添加「顯示：inline-block的」這兩個元素，像這樣：

<iframe style="display: inline-block;" width="450" height="315" src="https://www.youtube.com/embed/2qXhBIHlfaM" frameborder="0" allowfullscreen></iframe><img style="display: inline-block;" src="/pictures/colour_bar.png" width="200" height="315" />

如果這不起作用有可能是太少空間，下一個適合他們彼此對頁。你可以讓它們更小，像這樣：

<iframe style="display: inline-block;" width="225" height="162" src="https://www.youtube.com/embed/2qXhBIHlfaM" frameborder="0" allowfullscreen></iframe><img style="display: inline-block;" src="/pictures/colour_bar.png" width="100" height="162" />

祝你好運！

來源

2016-03-01 21:38:46 JoostS

我試圖做你加入style參數建議什麼，它仍然出現在兩行。 – Adi

我可以看到你的代碼嗎？因爲codepen中的當前代碼顯示它們彼此相鄰：http://codepen.io/anon/pen/NNPVoZ – JoostS

可能是空間問題...我更新了我的答案。 – JoostS

嘗試使用HTML表格

<table><tr><td style="width:50%"> 
<iframe width="450" height="315" src="https://www.youtube.com/embed/2qXhBIHlfaM" frameborder="0" allowfullscreen></iframe></td> 
<td style="width:50%"> 
<img src="/pictures/colour_bar.png" width="200" height="315"/> 
</td></tr></table>

來源

2016-03-13 08:55:08

對齊圖片旁邊嵌入視頻上的降價文件

回答

相關問題