1

我正在学习 CSS。我很想得到一个左边有谷歌地图的大画布，右边有一个有两个按钮的输入字段。现在我真的不明白为什么我的代码没有完成这项工作。它用谷歌地图绘制画布并将输入框和两个按钮放在它下面，这是错误的。

CSS

.floatright {
float:right;
width: 100px;
}

html:

  <body onload="initialize()">
    <div class ="floatRight">
     <div id="map-canvas" style="width: 1200px; height: 766px;"></div>
     <div>
      <input id="address" type="textbox">
      <input type="button" value="Encode" onclick="codeAddress()">
      <input type="button" value="Planes" onclick="Plane()">
    </div>
   </div> 
  </body>
4

5 回答 5

1

您的样式应该是带有大写 R 的 .floatRight。

我会使用 float:left 将谷歌地图画布封装在 div 中，然后使用 float:right 将输入按钮封装在 div 中。

于 2013-06-30T22:04:57.130 回答
1

你应该把 Right 而不是 floatright。

于 2013-06-30T22:05:31.800 回答
1

你的 CSS 说：

.floatright 
{
float:right;
width: 100px;
}

然而，您的课程是“floatRight”。

类区分大小写。“R”与“r”不同

于 2013-06-30T22:11:07.570 回答
0

我认为您所看到的是因为 id 为“map-canvas”的 div 和包含输入的下一个 div 都显示为“块”（这是 div 的默认设置），和块元素垂直渲染一个接一个。哟已经浮动了两个容器的父级，但是“浮动”不是继承的，所以两者都在浮动的父级内垂直渲染。

如果您希望地图和按钮位于同一“行”中，则需要浮动或显示为内联地图的容器和按钮的容器，并确保它们添加的宽度适合您的屏幕。

例如：

#map-canvas {
    width: 600px;
    height: 400px;
    float: right;
}

#the-div-that-contains-those-inputs {
    width: 300px;
    float: left;
}

请记住在 html 中调整地图的高度和宽度，使其在容器中看起来不错

于 2013-06-30T22:16:35.193 回答
0

除了其他人指出的区分大小写的问题，你真正想要的是向左浮动，试试这个：

CSS

.floatLeft 
{
float:left;
width: 700px;/*tweak as needed*/
height: 766px;
}

HTML

  <div class ="floatLeft" id="map-canvas"></div>
    <div>
      <input id="address" type="textbox">
      <input type="button" value="Encode" onclick="codeAddress()">
      <input type="button" value="Planes" onclick="Plane()">
    </div>
于 2013-06-30T22:16:53.550 回答