如何将两个iframe放在同一行

Question

我有这个代码：

<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php?   a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L"   style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding-   bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY"    target="_blank">Advertise in this spot</a>
</div>
<div align="center">
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php?   a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L"   style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding-   bottom: 20px; display:inline-block;></iframe>
</div>
<div style="text-align:center;">
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY"    target="_blank">Advertise in this spot</a>
</div>

我想显示在同一行，但不知道如何？我尝试添加：display:inline-block; 和 white-space: nowrap; 但没有任何改变。

有什么帮助吗？

Answer 1

尝试将 CSS 浮动添加到您的主 div

<div style="float:left;">
    <div align="center">
        <iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
    </div>
    <div style="text-align:center;">
        <a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a>
    </div>
</div>
<div style="float:right;">
    <div align="center">
        <iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe>
    </div>
    <div style="text-align:center;">
        <a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a>
    </div>
</div>

See in jsfiddle

Answer 2

您遇到了几个不同的问题：

您在 iframe 上的标记无效（您的某些 CSS 在 "style" 属性之外，因此不会有任何效果。）
您的 "advertise in this spot" div 是整个页面宽度，这会干扰您尝试应用于 iframe 的并排布局。

最简单的解决方案是将父容器添加到每组 iframe-plus-link，并将布局应用于这些容器。为了清楚起见，我将你的内联 CSS 拉到 class 声明中，并更改了大小以适应 SO 布局，但你可以将其调整为你喜欢的任何大小和样式：

.container {
  width: 200px; 
  display:inline-block;
}

iframe {
  height: 100px; 
  width: 200px;
}

.ad {
  text-align:center
}

<div class="container">
  <iframe src="//example.com"></iframe>
  <div class="ad">Advertise in this spot</div>
</div>

<div class="container">
  <iframe src="//example.com"></iframe>
  <div class="ad">Advertise in this spot</div>
</div>

Answer 3

只需将 css 添加到兄弟元素（在本例中为父 <div> 元素），使它们显示在同一行中，如

div[align] { display: inline-block; }

或

div[align] { float: left; }

并为它们定义一个宽度（如果它们适应内容宽度，如果太大它们可以换行）

div[align] { width: 50%; }
iframe { width: 100%; } /* or max-width */

Answer 4

两个 宽度为 50%的 div:

HTML

<div id="first_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a>
</div>
</div>

<div id="second_column">
<div align="center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe>
</div>
<div style="text-align:center;">
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a>
</div>
</div>

CSS

#first_column,
#second_column {
  width: 50%;
}

#first_column {
  float:left;
}

#first_column {
  float:right;
}

示例： http://codepen.io/anon/pen/vyWrbX

如何将两个iframe放在同一行

How to place two iframes is the same row

html

css

styling