html - 中间的OpenLayers map 上方的左右侧面板

我正在使用OpenLayers 3 API制作交互式游戏地图。我想总共有四个面板，每侧两个（左右），中间显示地图，但是地图应该位于侧面板下方。
浮动，z-index等一直使我感到困惑。我已经找到了有关该主题的一些答案，但是我似乎永远无法将这些解决方案结合起来。

侧面板和地图的当前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，但结果令人震惊。

最佳答案

你的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>

关于html - 中间的OpenLayers map 上方的左右侧面板，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39874291/