Question

我正在尝试使用Openlayers在我的网站上显示地图。我使用与此处相同的代码：

http://openlayers.org/dev/examples/all-overlays-google.html

除此之外，我想把它放在一张桌子里，所以在左边我可以提供一些关于地图的信息！问题是如果我在td标签中为map定义div标签，则运行地图时不会显示！我从td标签中取出它并将其保存在tr标签中，它显示正常！我的代码在这里：

    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
      <meta name="apple-mobile-web-app-capable" content="yes"/>
      <link rel="stylesheet" href="/theme/default/style.css" type="text/css">
      <link rel="stylesheet" href="style.css" type="text/css"/>
      <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
      <script src="OpenLayers.js"></script>
      <script src="all-overlays-google.js"></script>
    </head>
    <body onload="init()">
                <table style="width: 100%;">
                    <tr>
                        <td style="width: 20%;">
                            Some text here
                        </td>
                        <td style="width: 80%;">
                            <div style="width:100%; height:60%" id="map">
                            </div>   
                        </td>
                    </tr>
                </table>
    </body>
</html>

任何帮助都将受到高度赞赏。

Answer 1

有些观点：

<center>已弃用。使用CSS text-align: center。

表格仅用于显示表格数据。因为在您的情况下，您没有表格数据。不要使用表格。相反，使用像

这样的东西

<div id="colum-wrapper">
    <div id="left-column">Left</div>
    div id="right-column">Right</div>
</div>

#left-column{ float: left; width: /*whatever*/; }
#right-column{ overflow: hidden; }

Demo

Separation of behavior from markup：尽可能避免使用html属性添加事件处理程序。

在html表中的td标记中定义div标记

1 个答案: