Question

我正在使用谷歌地图作为页面。我必须设置一个图层，其中100％宽度为100％宽度减去200 px左侧工具栏：

<div id="toolbar" style="float: left;width: 20%">left</div> 
<div id="map" style="float: left;width: 80%;height: 100%;"></div>

此代码有效，但工具栏会调整大小。而我在那里只需要200像素。如何保存地图的位置呢？代码：

<html> 
    <head> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <style> 
            body, html
            {
                width: 100%;
                height: 100%;
            }

            body
            {
                margin: 0;
            }
        </style> 
    </head> 
    <body> 
        <script> 
            $(document).ready(function () {
                    var city = new google.maps.LatLng(56.3, 44)

                    var mapOptions = {
                        zoom: 12,
                        center: city,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    map = new google.maps.Map($('#map').get(0), mapOptions)
            })
        </script> 
        <div id="toolbar" style="float: left;width: 20%">left</div> 
        <div id="map" style="float: left;width: 80%;height: 100%;"></div>
    </body> 
</html>

Answer 1

在Safari中它有点剥落，所以我不得不将#map div包装在另一个div中以解决问题。试试这个：

<html> 
    <head> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <style> 
            body, html
            {
                width: 100%;
                height: 100%;
            }

            body
            {
                margin: 0;
            }
        </style> 
    </head> 
    <body> 
        <script> 
            $(document).ready(function () {
                    var city = new google.maps.LatLng(56.3, 44)

                    var mapOptions = {
                        zoom: 12,
                        center: city,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    map = new google.maps.Map($('#map').get(0), mapOptions)
            })
        </script> 
        <div id="toolbar" style="float: left; width: 200px;">left</div> 
        <div style="margin-left: 200px;">
            <div id="map" style="width: 100%; height: 100%;"></div>
        </div>
    </body> 
</html>

Answer 2

如果您没有使用css reset，请尝试此操作：


<div id="toolbar" style="float: left;width: 20%;margin:0;padding:0">left 
<div id="map" style="float: left;width: 80%;height: 100%;margin:0;padding:0">

两个div位置

2 个答案: