画布地图，不可见的右边框迫使其下方的其他 div

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，即“禁用”block 属性。您尝试在搜索 div 上使用它，但地图 div 是您的问题。

将float:left 属性添加到地图 div 中即可。见这里：http://jsfiddle.net/L222L/1/

提示：

如果您要删除它，那么设置边距属性有什么意义？

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