使用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>

flexbox mapbox-gl-js

使用mapbox gl js的CSS布局

问题描述

解决方法

相关问答