Canvas-map，隱形右邊框強制其他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屬性，如果你再刪除它的意義呢？

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