Question

我正在使用OpenLayers 3 API制作互动游戏地图。我希望总共有四个面板，每侧两个（右侧和左侧），中间显示地图，但地图应位于侧面板下方。 Float，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，但结果太可怕了。

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>

Answer 2

我重新完成了网站并设法解决了我的问题。而不是将侧边栏保持在地图div之外，现在它们在里面。我在地图上使用了位置：position: relative;。在侧边栏上position: absolute;。我在使用花车时遇到问题，但我会发布一个不同的问题来解决问题。

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

2 个答案: