在中间的OpenLayers地图上的左侧和右侧的面板

我正在使用OpenLayers 3 API制作交互式游戏地图。我希望总共有四个面板，每侧两个（右侧为&），地图显示在中间，但地图应位于侧面板下方。浮动，Z指数等一直困扰着我。我在这个主题上找到了一些答案，但我似乎无法将这些解决方案结合起来。在中间的OpenLayers地图上的左侧和右侧的面板

当前将侧面板和地图的CSS：

.map { 
    min-height: 100%; 
    min-width: 100%; 
    z-index: 0; 
    padding: 0px 0px 0px 0px; 
} 
.sidebar { 
    z-index:9999; 
    background-color: #f2f2f2; 
    width: 20%; 
    margin: 1% 1% 1% 1%; 
    padding: 1% 1% 1% 1%; 
    outline: none; 
    border-style: solid; 
    border-width: 3px; 
    border-radius: 2px; 
    border-color: #9ecaed; 
    box-shadow: 0 0 10px #9ecaed; 
} 
.right { float: right; } 
.left { float: left; }

3倍的DIV的HTML：

<div id="map" class="map"></div> <!-- Map, DIV that goes in the middle --> 

<!-- Left sidebars --> 
    <div class="sidebar left"> 
     I removed the content so it is shorter 
    </div> 

    <div class="sidebar left" style="padding-top: 0px; height: 50%;"> 
     I removed the content so it is shorter 
    </div> 

<!-- Right sidebars --> 
    <div class="sidebar right"> 
     I removed the content so it is shorter 
    </div> 

    <div class="sidebar right" style="padding-top: 0px; height: 50%;"> 
     I removed the content so it is shorter 
    </div>

我一直在尝试这种answer，但结果是可怕的。

来源

2016-10-05 triankle

你的html看起来像什么？请记住，float: right/left只适用于嵌套的html结构。这意味着：

<div class="outer" style="float:right;"> 
// this div gives the attribute float to it's inner divs 
<div class="inner"> 
//this inner div will float right! 
</div> 
</div>

来源

2016-10-05 12:46:34 edamerau

我编辑了我的问题，现在包含HTML – triankle

我已经重新做了网站，并设法解决我的问题。现在他们在里面了，而不是将侧边栏保留在地图div之外。我在地图上使用了位置：position: relative;。和侧边栏上的position: absolute;。我遇到了漂浮物的问题，但我会发布一个不同的问题来解决问题。

来源

2016-10-05 13:48:57 triankle

在中间的OpenLayers地图上的左侧和右侧的面板

回答

相关问题