0

我正在尝试在网页中获得 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

我不确定出了什么问题。我做了很多谷歌搜索，但我认为这与谷歌地图有关。请帮帮我！

4

1 回答 1

2

实际上，对于您当前的 CSS 和 HTML，这正是它应该看起来的样子。

您有一个map_canvas未浮动的 div （面板），因此 HTML 中之后的所有内容（这意味着您的面板results和details面板）都低于此（除非在或面板map_canvas上使用绝对或固定定位，这不是这里的情况）。resultsdetails

解决方案：将结果首先放在您的 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 所做的唯一更改是为面板添加轮廓。

于 2012-05-27T15:09:03.697 回答