如何解决使用mapbox gl js的CSS布局
我正在尝试为自己的学习创建地理位置Web应用程序。我正在使用Mapbox GL JS,尝试使用CSS定位地图时遇到很多麻烦
我可以并排获取地图和状态面板
但是我永远做不到:
我分别搜索了flexbox和CSS网格,但结果要么使地图消失,要么状态面板+控制面板消失。
我应该看什么?
编辑#1:
/* shows map on left panel and status on the right panel */
<body>
<div id="map"></div>
<div id="log"></div>
<script src="js/scripts.js"></script>
</body>
#map { position: absolute; top: 0; bottom: 0; width: 760%; }
#log { float: right; }
编辑#2: / *我已经尝试过bootstrap4。我所得到的只是一张只有在状态更新时才可见的地图* /
<div class="container">
<div class="row">
<div class="col-6"><div id="map"></div>
</div>
<div class="col-6">
<div id="log"></div>
</div>
</div>
</div>
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
解决方法
答案是弹性。普通的旧Javascript。没有引导程序。
// main.css
.container { padding: 0; margin: 0; display: flex; }
.left { flex: 2; }
.right { flex: 1; background-color: red;}
// main.html
<div class="container">
<div class="left">
<div id="map"></div>
</div>
<div class="right">
<div id="control-panel">
<button id="btncenter">Center</button>
</div>
<div id="status"></div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。