html - 如何在响应式 Google map 旁边添加联系方式

Question

对不起，如果这是基本的，但我一直在尝试在谷歌地图旁边添加联系方式。但它们最终显示在 map 下方，而不是旁边。我错过了什么？非常感谢您的帮助!

这是它目前的样子:

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

首先<div>标签自动包含 display: block元素中的样式，因此即使元素不是，它也会使元素显示为全宽。所以你需要做的是添加 float: left在每个 div 容器中。