So fügen Sie Kontaktdaten neben Responsive Google Map hinzu

Question

Entschuldigung, wenn dies grundlegend ist, aber ich habe versucht, die Kontaktdaten neben der Google-Karte hinzuzufügen. Aber sie enden unter der Karte, anstatt neben ihnen. Was vermisse ich? Schätze wirklich deine Hilfe!

Dies ist, wie es aussieht, zur Zeit:

HTML:

<div class="span9"> 
     <div class="map-responsive"> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
</div> 
    </div> 
     <div class="span3"> 
      <div class="contact-details"> 
       <h3>Contact Details</h3> 
       <ul> 
        <li><a href="#">hello@hello.com</a></li> 
        <li>(916) 375-2525</li> 
        <li> 
         NY City meet 
         <br> 
         NY City 
         <br> 
         USA 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

CSS:

.map-responsive{ 
    overflow:hidden; 
    padding-bottom:50%; 
    position:relative; 
    height:0; 
} 
.map-responsive iframe{ 
    left:0; 
    top:0; 
    height:80%; 
    width:50%; 
    position:absolute; 
} 


.contact-details h3 { 
    color: #FFFFFF; 
    font-size: 24px; 
    font-weight: 300; 
    margin-bottom: 30px; 
    line-height: 1em; 
    text-transform: uppercase; 
} 

.contact-details ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.contact-details ul li { 
    margin: 0 0 20px; 
    line-height: 28px; 
    padding: 0; 
} 

Answer 1

habe ich Bootstrap-Version 2.3.1

prüfen Updated Fiddle

HTML

<div class="row"> 

    <div class="span9"> 
    <div class="map-responsive"> 
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="100%" height="350" frameborder="0" style="border:0" allowfullscreen></iframe> 
    </div> 
    </div> 
    <div class="span3"> 
    <div class="contact-details"> 
     <h3>Contact Details</h3> 
     <ul> 
     <li> 
      <a href="#"> 
      hello@hello.com 
      </a> 
     </li> 
     <li>(916) 375-2525</li> 
     <li> 
      NY City meet 
      <br> 
      NY City 
      <br> 
      USA 
     </li> 
     </ul> 
    </div> 
    </div> 

</div> 

Answer 2

Vor allem <div> Tag automatisch display: block Stil in dem Element enthalten , so wird es das Elem machen ent angezeigt, auch wenn das Element nicht Also, was Sie tun müssen, ist float: left in jedem der div-Container hinzufügen.

Answer 3

Aktualisieren Sie die Position als pro Anforderungen verwendet

.contact-details ul li { 
position:absolute; 
left:300px; 
top:20px; 
margin: 0 0 20px; 
line-height: 28px; 
padding: 0; 
}