文章/答案/技术大牛

发布

社区首页 >问答首页 >使用mapbox gl js的CSS布局

问使用mapbox gl js的CSS布局
EN

Stack Overflow用户

提问于 2020-08-25 12:19:48

回答 1查看 427关注 0票数 2

我正在尝试创建一个geolocation web应用程序用于我自己的学习。我正在使用Mapbox GL JS，尝试使用CSS定位地图时遇到了很多问题

我可以把地图和状态面板放在一起

但我永远不会做以下事情：

我已经用googling搜索了flexbox和CSS grid (分别)，但结果要么是地图消失，要么是状态面板+控制面板消失。

我应该调查什么？

编辑#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%; }

mapbox-gl-js

css

flexbox

回答 1

Stack Overflow用户

发布于 2020-08-27 10:46:49

答案是flex。普通旧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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63571994

复制

相似问题

问使用mapbox gl js的CSS布局
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用mapbox gl js的CSS布局EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用mapbox gl js的CSS布局
EN