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

Question

我正在使用 OpenLayers 3 API 制作交互式游戏 map 。我想要总共有四个面板，每边两个(左右)， map 显示在中间，但 map 应该位于侧面板下方。Float、z-index 等一直让我很困惑。我找到了关于这个主题的一些答案，但我似乎永远无法组合这些解决方案。

侧面板和 map 的当前 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 ，但结果很糟糕。

Answer 1

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