小div浮動在一個較大的div內

我有一個谷歌地圖，佔據屏幕的寬度和高度的100％。那麼，高度設置爲1000px，因爲我無法達到100％，但這是另一個問題。無論如何，我希望#map div佔據整個屏幕並在屏幕右側顯示一個矩形框 - 這是一個將該類設置爲「search_box」的div。小div浮動在一個較大的div內

我有兩個問題，在我的應用程序的HTML和CSS：

的矩形框不顯示在我所想要的頁面的右側，但它表明了谷歌地圖下，所以你看不到它！我只能確認這一點，因爲如果我刷新頁面，它會在谷歌地圖覆蓋它之前一秒鐘顯示出來。 :(
我希望箱子比它上面的菜單低約50px，但是頂部填充似乎並沒有做任何事情，我不確定這是否是因爲它是浮動的任何想法？

而且，如果 'search_box' DIV是內部的 '地圖' 的div？

在我的HTML

<div id="map"></div> 
<div class="search_box"></div>

在我的CSS

.search_box { 
    background-color: white; 
    float: right; 
} 

#map { 
    width: 100%; 
    height: 1000px; 
    padding: 0 auto; 
    margin: 0px; 
    overflow: hidden; 
}

來源

2014-04-08 dingalingchickenwiing

加小提琴和更新代碼 –

@RJeyashri：這裏是小提琴，HTTP：//jsfiddle.net/3bV3M/，現在讓我知道THW答案請。 – KesaVan

要使Google地圖成爲100％高度，您必須將所有祖先的身高設置爲100％：http://jsfiddle.net/3bV3M/1/ – jacob

如果您希望搜索框在地圖旁邊浮動，您還需要浮動#map。如果你想在地圖內部搜索框，你應該將它們都包含在一個包含div的位置，並且絕對需要在搜索框中定位。

來源

2014-04-08 04:29:42

要將搜索框放置在地圖的右側，請將div s包裹在另一個div內。

<div class="map-wrapper"> 
    <div id="map"></div> 
    <div class="search_box"></div> 
</div>

現在使用absolute position作爲搜索div來將其定位在地圖的右側。

DEMO

CSS

.map-wrapper{ 
    position:relative; 
} 
.search_box { 
    background-color: blue; 
    width:100px; 
    height:200px; 
    position:absolute; 
    top:10px; 
    right:10px; 
} 

#map { 
    width: 100%; 
    height: 1000px; 
    padding: 0 auto; 
    margin: 0px; 
    background-color:#ccc; 
}

來源

2014-04-08 04:37:21 James

我無法想象你爲什麼會想/護理元素位置下方另一個完全覆蓋，但：http://jsfiddle.net/3bV3M/5/

重訂購您的DOM：

div.search-box 
div#map

#map應該具有絕對位置：將其從正常文檔流中提取出來，但允許其位置仍然受到控制。我在.map的頂部留下了搜索框，以便您可以看到它的位置;把它移到後面，刪除z-index: 1;。請注意，我在小提琴上啓用了css normalisation。

html, body { 
    display:  block; 
    height:  100%; 
    position:  relative; 
    width:  100%; 
} 
.search_box { 
    background: red; 
    height:  1.2rem; 
    margin-left: auto; 
    margin-right: 0; 
    position:  relative; 
    top:   50px; 
    /* use `top` instead of `margin-top`, it doesnt contribute to the box */ 
    width:  5rem; 
    z-index:  1; /* remove me */ 
} 
#map { 
    background: black; 
    height:  100%; 
    position:  absolute; 
    top:   0; 
    width:  100%; 
}

來源

2014-04-08 05:07:45 jacob

小div浮動在一個較大的div內

回答

相關問題