Question

我的联系页面上有一个div，其中包含contactdetails的ID。根据Chrome的开发者工具，右边有一个边距，它占据了页面的其余部分，不允许我将我的谷歌地图放在我想要的地方，与联系方式相对。

HTML

<div class = "content"> <!--begin Content--><!-- InstanceBeginEditable name="editableContent" -->
    <div id = "contactdetails">
        <ul>
        <li><img src = "Images/icons/png/houseicon.png" alt = "Address icon"><p>23 Kingfisher Court, Werribee 3030, Victoria</p></li>
        <li><img src = "Images/icons/png/emailicon.png" alt = "Email icon"><p>contact@greenery.com</p></li>
            <li><img src = "Images/icons/png/phoneicon.png" alt = "Phone icon"><p>0397488945</p></li>
        </ul>
    </div>
    <div id = "contactdetails-right">
        <div id="apimap">
            <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:180px;width:200px;'>
                <div id='gmap_canvas' style='height:180px;width:200px;'></div><div><small><a href="http://embedgooglemaps.com">                                 embed google maps                           </a></small></div><div><small>
                <a href="https://termsandcondiitionssample.com">terms and conditions sample</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style>
                </div><script type='text/javascript'>function init_map()
                {var myOptions = {zoom:16,center:new google.maps.LatLng(-37.8777845,144.66931069999998),mapTypeId: google.maps.MapTypeId.ROADMAP}
                ;map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-37.8777845,144.66931069999998)})
                ;infowindow = new google.maps.InfoWindow({content:'<strong>googlemap</strong><br>23 Kingfisher court, werribee<br>'});google.maps.event.addListener(marker, 'click', function()
                {infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);
            </script>
        </div>
</div>

CSS

#contactdetails{
width: 50%;
height: 600px;
box-shadow: 10px 10px 5px #888888;
}

#contactdetails ul{
    margin: 0;
}

#contactdetails ul li{
    list-style-type: none;
    padding: 35px 0;
    text-align: left;
}

#contactdetails ul li img {
    display: inline-block;
    padding-right: 30px;
}

#contactdetails ul li p {
    display: inline;
        font-size: 1em;
}

#contactdetails-right{
    float: right;
    width: 200px;
    border-left: 5px solid #555;
}

#apimap{
    margin-bottom: 50px;
}

Answer 1

您只需要将float left添加到contactdetails

#contactdetails {
    width: 50%;
    height: 600px;
    box-shadow: 10px 10px 5px #888888;
    float: left;
}

Answer 2

True

或者您可以将其更改为0px。

#contactdetails-right{margin-right: -20px;}

或者你可以尝试

#contactdetails-right{position: relative; left: 20px;}

您是否有我们可以查看的实时链接，以确定它不是父母/子女问题或身体边缘？

如何摆脱我的div上的正确边距？

2 个答案: