【问题标题】: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】:

    这是使用floatdivs 的解决方案

    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%。此外,尽可能不要使用内联样式,因为其中许多已经或将被弃用。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2015-11-16
          • 2011-08-13
          • 2013-08-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多