如何使用Google地圖獲取2列布局？

Question

我想要在左側窗格中顯示Google地圖和一些數據（詳細信息div）下面的一個網頁中的2列（3窗格= 2 + 1）佈局和右列一些數據（結果div ），但我無法將（結果）數據div對齊到Google地圖的右側。它顯示在細節div的Google地圖右下方。這是我的代碼：

CSS代碼：

#map_canvas { 
    margin: 10px 10px 10px 10px; 
} 
#details { 
    width: 45%; 
    height: 20em; 
} 
#results { 
    width: 52%; 
    float: right; 
    height: 40em; 
    overflow: scroll; 
} 

HTML代碼：

<div id="map_canvas" style="width:45%; height:20em;"></div> 
<div id="results"></div> 
<div id="details"></div> 

電流輸出的屏幕截圖：

http://i.stack.imgur.com/AdVcX.jpg

我不知道什麼是錯誤。我做了很多谷歌搜索，但我認爲這與谷歌地圖有關。請幫助我！

Answer 1

實際上，使用您當前的CSS和HTML，這正是它應該看起來的樣子。

你有後，在HTML（這意味着你都和results面板details）低於自帶一個div（map_canvas面板），它不浮動，所以這一切map_canvas（除非絕對或固定位置上使用results或details面板，這裏不是這種情況）。

解決方案：將結果放在HTML中，並將您的兩個窗格放在另一個div的左邊。

像這樣：

<div id="results"></div> 
<div class="left-col"> 
    <div id="map_canvas" style="width:45%; height:20em;"></div> 
    <div id="details"></div> 
</div> 

你可以在這裏看到的結果：http://dabblet.com/gist/2814665 - 我給你的CSS做出的唯一改變是增加概括了板。