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浮点数添加到主divs

<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

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

Answer 3

你有几个不同的问题：

你在iframe上有无效的标记（你的一些CSS在＆＃34;样式＆＃34;属性之外，所以不会产生任何影响。）
你的＆＃34;在这个地方做广告＆＃34; div是整页宽度，这会干扰您尝试应用于iframe的并排布局。

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

＆＃13;

.container {
  width: 200px; 
  display:inline-block;
}

iframe {
  height: 100px; 
  width: 200px;
}

.ad {
  text-align:center
}

＆＃13;

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

＆＃13;

Answer 4

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

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

或

div[align] { float: left; }

并为它们定义宽度（如果它们适应内容宽度，如果太大则可以在新行上获得）

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

如何放置两个iframe是同一行

4 个答案: