如何并排放置两个iframe

Question

我尝试了几个代码,比如这个:

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

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

Answer 1

干得好.在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/

Answer 2

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

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

3.添加此 CSS：

.box { display:inline-block; }

演示版

Answer 3

问题在这里：

为什么是width100%？为什么在div？（这样，他们就永远不会肩并肩了:-)）

尝试这个 ：

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