在中間的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地圖上的左側和右側的面板

回答

相關問題