1

我正在尝试在另一个父 div 中显示地图 div。

更具体地说，我希望<div id='map'></div>仅出现在 div id="mapbox"中。我遇到的问题是地图显示在包含 div 之外id="mapbox"。页面上其他地方一定有一些 CSS 导致地图显示不正确。

<div class="g12" id="mapbox" style="display:none">        
<h1 style="padding-left:7px; padding-bottom:14px;">MapBox API</h1>  

<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />

<style>
    #map { position:absolute; top:0; bottom:0; width:100%; }
</style>

<div id='map'></div>

<script>
    mapbox.auto('map', 'examples.map-zr0njcqy');
</script>

有人可以解释我如何更改 CSS 以使我的地图 div 的样式仅保留在包含的父 div 中吗？谢谢。

4

1 回答 1

1

绝对位置会让你的元素流出正常的文档流，所以为了防止元素流出容器框，你需要给position: relative;容器元素，这样你的绝对位置div就会相对于父元素

#mapbox {
   position: relative;
}
于 2013-06-01T04:48:41.670 回答