Question

我正在尝试将我的谷歌地图与一个DIV容器中的文本对齐。我似乎无法添加文本而没有将地图向下推到页面下方。我试过向右漂移，虽然它确实向右移动，但它似乎并不喜欢它周围的文字！任何帮助表示赞赏!!!

HTML代码

  <div id="middle">
  <div id="middlecontent">
<h2>Contact Us</h2>
<p>
Please call us on 00000 000000
<br>
Our Address is:<br>
Text Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
</p>
<!--map start-->    
<!--Positions map in page -->
<iframe width="425" height="330" float="right" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Rising+Sun,+High+Street,+Tarporley&amp;aq=0&amp;sll=53.800651,-4.064941&amp;sspn=12.709674,39.506836&amp;ie=UTF8&amp;hq=The+Rising+Sun,&amp;hnear=High+St,+Tarporley+CW6,+United+Kingdom&amp;cid=13650885383800041617&amp;ll=53.166791,-2.667961&amp;spn=0.018009,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
<br />
<!--map end-->
 </div>
 </div>

CSS

#middle {
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    height: 400px;
    margin-top: 65px;
    border:3px solid #999;
    background-color:#333;
    }

#middlecontent {
    font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px;
}

Answer 1

这是你要找的吗？

HTML：

<div id="middle">
<div id="goomap">
</p>
<!--map start-->    
<!--Positions map in page -->
<iframe width="425" height="330" float="right" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=The+Rising+Sun,+High+Street,+Tarporley&amp;aq=0&amp;sll=53.800651,-4.064941&amp;sspn=12.709674,39.506836&amp;ie=UTF8&amp;hq=The+Rising+Sun,&amp;hnear=High+St,+Tarporley+CW6,+United+Kingdom&amp;cid=13650885383800041617&amp;ll=53.166791,-2.667961&amp;spn=0.018009,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe>
<br />
<!--map end-->
</div>
  <div id="middlecontent">
<h2>Contact Us</h2>
<p>
Please call us on 00000 000000
<br>
Our Address is:<br>
Text Text Text<br>
Text Text<br>
Text Text<br>
Text Text<br>
 </div>
 </div>

CSS：

#middle {
    margin-right: auto;
    margin-left: auto;
    width: 70%;
    height: 400px;
    margin-top: 65px;
    border:3px solid #999;
    background-color:#333;
    }

#middlecontent {
    font: normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 10px;
}

#goomap {
float:right;
}

你需要调整你的填充，但这应该让你在路上。希望它有所帮助。

将Google地图与文本对齐

1 个答案: