Question

我正在尝试在网页中获得一个2列（3个窗格= 2 + 1）布局，左侧窗格显示Google地图和一些数据（详细信息div），右侧列显示一些数据（结果） 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，这正是它应该看起来的样子。

你有一个没有浮动的div（map_canvas面板），所以HTML之后的所有内容（这意味着你的results和details面板）都在下面这个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所做的唯一更改是为面板添加轮廓。

如何使用Google地图获得2列布局？

1 个答案: