Question

我正在使用jVectormaps在一个简单的网站上工作。我有一张欧洲地图，我想把它放在屏幕的右侧。地图的高度为100％，因此只要用户调整窗口大小，它就会缩放。但问题是我的地图是居中的，我无法找到一种方法来定位它。

当前代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script src="jquery-jvectormap-1.2.2.min.js"></script>
    <script src="jquery-jvectormap-world-mill-en.js"></script>
    <script src="jquery-jvectormap-europe-mill-en.js"></script>
</head>
<body>
<div id="map"></div>
    <script>
        $(function (){
            $('#map').vectorMap({
                map: 'europe_mill_en',
                backgroundColor: 'transparent',
                zoomOnScroll: false,
                regionStyle: {
                    initial: {
                        fill: 'red'
                    },
                    hover: {
                        fill: 'yellow'
                    }
                }
            });
        });
    </script>
</body>
</html>

CSS：

html, body {
    height: 100%;
}

#map {
    height: 100%;
}

我尝试使用display：block和float：right，但这似乎不起作用。我无法在网站上提供的文档中找到任何帮助。

有什么建议吗？

提前谢谢

Answer 1

这似乎与HTML / CSS而不是jVectorMap有关，但无论如何，您可以尝试将地图包装在另一个div中并将该div的内容对齐到右边：

.wrapper {
    text-align: right;
}

<div class="wrapper">
    <div id="map"></div>    
</div>

jVectorMaps定位

1 个答案: