我绝不是网站编码专家,这实际上是我第一次弄乱这样的代码。
我正在为我的俱乐部运行一个 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>
最佳答案
您需要将带有信息的两个 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;
}
关于CSS - Wordpress 将两个 iframe 与文本并排放置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32164923/