css - 如何使用 Google map 获得 2 列布局？

Question

我正在尝试在网页中获得一个 2 列(3 个 Pane = 2 + 1)布局，其中左侧 Pane 显示 Google map 及其下方的一些数据(详细信息 div)，右侧列一些数据(结果div)，但我无法让(结果)数据 div 与 Google map 的右侧对齐。它显示在详细信息 div 右侧的 Google map 下方。这是我的代码:

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，这正是它应该的样子。

您有一个未 float 的 div(map_canvas 面板)，因此 HTML 中其后的所有内容(这意味着您的 results 和 details 面板)在此 map_canvas 下方(除非在 results 或 details 面板上使用了绝对定位或固定定位，这是'这里不是这种情况)。

解决方案:将结果放在您的 HTML 中的第一位，然后将左侧的两个 Pane 包裹在另一个 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 所做的唯一更改是为面板添加轮廓。