レスポンシブグーグルマップの隣に連絡先の詳細を追加するには

Question

申し訳ありません、これは基本的なことですが、私はGoogleマップの隣に連絡先の詳細を追加しようとしています。しかし、彼らはそれらの隣ではなく、マップの下に表示されてしまいます。私は何が欠けていますか？本当にあなたの助けに感謝します！

これが現在どのように見えるかです：

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

私は要件に従ってブートストラップバージョン2.3.1

チェック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

すべて<div>タグの最初に自動的に要素にdisplay: blockスタイルを含めます、それはelemを作るでしょう要素が表示されていなくても、フル幅で表示されます。ですから、divコンテナのそれぞれにfloat: leftを追加する必要があります。

Answer 3

更新位置を使用していた

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