Question

我试图在一个网页上用左窗帘显示谷歌地图和下面的一些数据(细节div)以及右栏列出一些数据(结果div), 在一个网页上用二栏(3个窗帘=2+1)布局,但是我无法获得与谷歌地图右侧一致的(结果)数据div。它显示在谷歌地图右侧的细节div。这是我的代码 :

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>

当前输出的截图 :

https://i.sstatic.net/AdVcX.jpg

我不知道什么是错的。我做了很多谷歌, 但我觉得这与谷歌地图有关。请帮助我!

Answer 1

事实上,以你现在的CSS和HTML, 这正是它应该的样子。

您有一个 div ( map_canvas 面板) 没有浮放, 因此在 HTML (即您的 结果 和 details 面板) 中, 之后出现的一切都低于此 map_canvas (除非在 结果 或 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所做的唯一修改是增加小组的大纲。

友情链接