如何并排放置两个iframe

时间:2014-05-19 12:11:01

标签: html css iframe

我尝试了几个代码,例如:

<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" 
                         frameborder="0" 
                         scrolling="no" 
                         width="100%" 
                         height="512" 
                         align="left"> </iframe> </div>
<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" 
                         frameborder="0" 
                         scrolling="no" 
                         width="100%" 
                         height="512" 
                         align="right">
    </iframe>

如果有人可以为我解决这个问题,那么它并不起作用,谢谢。

4 个答案:

答案 0 :(得分:6)

你走了。在div中使用float这是在下次发布之前基本善用的搜索。

HTML:

<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe> </div>

<div class="box">    <iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" frameborder="0" scrolling="no" width="100%" height="512" align="right">
    </iframe>

CSS:

.box{
    float:left;
    margin-right:20px;
}
.clear{
    clear:both;
}

http://jsfiddle.net/E5WFT/

答案 1 :(得分:3)

1。从iframe中删除width="100%"

2。如果您希望它们完全并排,请将align="right"更改为align="left"第二个iframe。

3. 添加此CSS:

.box { display:inline-block; }

<强> DEMO

答案 2 :(得分:1)

问题在于:

enter image description here

为什么width 100%?为什么在div? (这样,他们永远不会并肩: - ))

试试这个:

http://jsbin.com/hirirazu/3/edit

enter image description here

答案 3 :(得分:0)

它不能在宽度为100%的地方工作,因为它表明iframe的宽度是身体的100%。此外,尽可能不使用内联样式,因为其中许多已经或将被弃用。