小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内

回答

相关问题