將Google地圖與文本對齊

Question

我正在嘗試將我的Google地圖與文本放在一個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; 
} 

您需要調整您的填充，但這應該讓你對你的方式。希望能幫助到你。