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

Question

我似乎无法让这些 Google map div 并排放置。在我决定对其进行重组之前，它一直运行良好。

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

这一切都是为了能够打开和关闭各个面( map 与全景)的显示，包括位于每张 map 上方的纬度/经度读数。

这是早期版本，工作正常但有点乱。例如，要关闭街景全景，我将不得不关闭两个 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%，然后调整 map 大小时，它会很好地扩展。

<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 等，但无济于事。

这是一个 fiddle :http://jsfiddle.net/Lack10o0/

Answer 1

你只需要删除不必要的关闭 </div> s 在第 2 行和第 9 行。

编辑:我更新了你的 jsfiddle