Question

我似乎无法让这些谷歌地图div并排坐下。它工作正常，直到我决定重组它。

它由4个div组成，左边一个在另一个上面，另一个在右边上面。左边的两个在他们自己的容器中，右边的两个在容器中。然后，这两个容器并排放在一个更大的容器内。

所有这些都是关于能够打开和关闭各个侧面的显示（地图与全景），包括位于每张地图上方的纬度/经度读数。

这是早期的版本工作正常但很混乱。例如，要关闭街景全景，我将不得不关闭两个div。

<div style="float:left; width: 512px;">
    <table>
        <tr><td><b>Lat/Lng:</b></td><td id="mappos">-33.1234,150.1234</td></tr>
    </table>
</div>
<div style="float:left;">
    <table>
        <tr><td><b>Lat/Lng:</b></td><td id="svpos">-33.12345,150.12345</td>
        <td><b>Hdg:</b></td><td id="hdg">90</td></tr>
    </table>
</div>
<div style="clear:both;"></div>
<div style="width: 1024px; height: 512px">
    <div id="map" style="float:left; width: 50%; height: 512px;"></div>
    <div id="pano" style="float:left; width: 50%; height: 512px;"></div>
</div>

这是新的更简洁的代码，据说可以让每个方面更容易打开和关闭，但它不起作用。两对div位于彼此的顶部而不是并排。这无疑是一个明显的错误，但我无法发现它。我看了很多关于并排div的其他帖子，但看不出我做错了什么。

最初我有左边和右边的容器div指定宽度为512px但是当我尝试通过Javascript将它们扩展到1024px时它不起作用。因此我使用了50％。当我将其更改为100％，然后进行地图调整大小时，它会很好地扩展。

<div style="clear:both; width: 1024px;">
    <div id="mapdiv" style="float:left; width: 50%"></div>
        <div style="width: 512px;">
            Lat/Lng:&nbsp;<span id="mappos">-33.1234,150.1234</span>
        </div>
        <div id="map" style="width: 512px; height: 512px;">
        </div>
    </div>
    <div id="panodiv" style="float: left; width: 50%"></div>
        <div style="width: 512px;">
            Lat/Lng:&nbsp;<span id="svpos">-33.12345,150.12345</span>&nbsp;<span id="hdg">90</span>
        </div>
        <div id="pano" style="width: 512px; height: 512px;">
        </div>
    </div>
</div>

我认为这可能是一个填充问题。我尝试将外部容器的宽度增加到1040等，但无济于事。

这是一个小提琴：http://jsfiddle.net/Lack10o0/

Answer 1

您只需删除第2行和第9行中不必要的结束</div>。

修改：我更新了您的jsfiddle

Answer 2

你有太多的结束标签。在</div>之后<div id="mapdiv" style="float:left; width: 50%">

之后取出<div id="panodiv" style="float:left; width: 50%">

以下是更正后的代码：

 <div style="clear:both; width: 1024px;">
        <div id="mapdiv" style="float:left; width: 50%">
            <div style="width: 512px;">
                Lat/Lng:&nbsp;<span id="mappos">Top left div</span>
            </div>
            <div id="map" style="width: 512px; height: 512px;">Bottom left div
            </div>
        </div>
        <div id="panodiv" style="float: left; width: 50%">
            <div style="width: 512px;">
                Lat/Lng:&nbsp;<span id="svpos">Top right div</span>&nbsp;<span id="hdg">90</span>
            </div>
            <div id="pano" style="width: 512px; height: 512px;">Bottom right div
            </div>
        </div>
    </div>

Answer 3

看起来你有很多关闭标签。你有7个开场div和9个关闭div。有缺陷的可能是#mapdiv和#panodiv背后的那些。

上下两个div在另一对相似的div旁边堆叠

3 个答案: