如何并排放置两个 iframe答案

【问题标题】：How to put two iframes side by side如何并排放置两个 iframe
【发布时间】：2014-05-19 12:11:01
【问题描述】：

我已经尝试了几个代码，比如这个：

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

它不能同时工作，如果有人可以为我解决这个问题，谢谢。

【问题讨论】：

标签： html css iframe

【解决方案1】：

这是使用float 和divs 的解决方案

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

CSS：

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

http://jsfiddle.net/E5WFT/

【讨论】：

【解决方案2】：

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

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

3. 添加这个 CSS：

.box { display:inline-block; }

DEMO

【讨论】：

框仍然没有覆盖 100% 的宽度。就像右边有个看不见的盒子一样。

【解决方案3】：

问题就在这里：

为什么width 100% ？为什么在div 中？（这样，他们永远不会并排:-)）

试试这个：

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

【讨论】：

【解决方案4】：

它不能在宽度为 100% 的情况下工作，因为它表明 iframe 的宽度是主体的 100%。此外，尽可能不要使用内联样式，因为其中许多已经或将被弃用。

【讨论】：