Question

我的谷歌地图画布，设置宽度为80％。地图本身填充了80％，但画布右侧有一个宽阔的空间，填满了屏幕左侧的20％。

这使我的div无法被放置在那里。

HTML：

<div id="map-canvas" ></div>

<div id="search">Test</div>

css:

  #map-canvas {
    width: 80%;
    height: 100%;
    margin-left: 50px;
    margin-right: 50px;
    min-height: 80px;
    min-width: 200px;
    margin: 0;
    padding: 0;
    z-index: 0;
    position: relative;
  }



#search {
 background: #2E2E2E;
 float: right;
 width: 20%;
 height: 800px;
 z-index: 1;

 }

Answer 1

这是因为div默认为block元素，这意味着它会填充所有可用的宽度，除非您另有说明。

一种方法是使用float，即＃34;禁用＆＃34; block属性。您尝试在搜索div上使用它，但地图div是您的问题。

将float:left属性添加到地图div，它就可以了。见这里：http://jsfiddle.net/L222L/1/

只是提示：

设置保证金属性的重点是什么，如果你要删除它？

margin-left: 50px;  <---
margin-right: 50px;   <---
/* ... */
margin: 0;   <---

画布地图，不可见的右边界强制下面的其他div

1 个答案: