CSS - Wordpress 将两个 iframe 与文本并排放置

Question

我绝不是网站编码专家，这实际上是我第一次弄乱这样的代码。

我正在为我的俱乐部运行一个 wordpress 网站，我需要执行以下操作:

1.) 将两个谷歌地图 iframe 一个放在另一个下方(理想情况下中间有一个小空间)并放在页面的右侧。

2.) 将几行描述 map / field 的文字放在 map 左侧的一行中。

这是我的尝试:

<div style="float: left; width: 200px;">Little Venice Sports Centre
10 Crompton Street
W2 1ND
Tel: 020 7641 5111</div>
<div style="float: right; width: 425px;"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe></div>

<div style="float: left; width: 200px;">Ethos Sports Centre
7 Prince's Garden
SW7 1NA
Tel: 020 7594 0910</div>
<div style="float: right; width: 425px;"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.713596042022!2d-0.17350875000000218!3d51.500123050000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487605448bddeb47%3A0x9a96da198601f824!2sEthos+Sports+Center%2C+Knightsbridge%2C+London+SW7%2C+UK!5e0!3m2!1sen!2sae!4v1440265942096" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Answer 1

您需要将带有信息的两个 iframe 放在单独的 div 中，然后使用 CSS position 将 iframe 定位到右侧

http://jsfiddle.net/jofish999/h3eqeq04/

<div class="map">
    <div style="float: left; width: 200px;">
    Little Venice Sports Centre
    10 Crompton Street
    W2 1ND
    Tel: 020 7641 5111
    </div>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe>
</div>
<br>
<div class="map">
    <div style="float: left; width: 200px;">
    Little Venice Sports Centre
    10 Crompton Street
    W2 1ND
    Tel: 020 7641 5111
    </div>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9929.981791888986!2d-0.177116!3d51.522472!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x53e809c8db1dbfb3!2sLittle+Venice+Sports+Centre!5e0!3m2!1sen!2suk!4v1412638341053" width="400" height="300" frameborder="0"></iframe>
</div>

---

.map {
    width: 800px;
}
iframe {
   position: relative;
    right: -150px;
}