如何在绝对div旁边放置或浮动一个div

时间:2014-03-11 04:23:02

标签: html css

我希望div与Google地图并排显示。但是,谷歌地图必须绝对定位才能占据一定的百分比。

<style>

        #text{
        height:40%;
        width:40%;
        float:left;
        display:inline;
        margin:10px;
        background-color:white;

        }
        #map{
        height:100%;
        width:40%;
        float:left;
        position:absolute;
        }                   
    </style>

        <div id="map1"> </div>
    <div id="infoBox">text goes here </div>

2 个答案:

答案 0 :(得分:0)

#map {
    left: 40%; /* width of #infoBox */
    margin-left:10px; /* greater than or equal to left margin of #infoBox */
}

答案 1 :(得分:0)

当你在这里时,请继续:

position: absolute;
left: 40%;

在文本元素上。你可以通过这种方式保持10px左边的保证金。

#infoBox{
    height:40%;
    width:40%;
    margin:10px;
    background-color:white;
    position: absolute;
    left: 40%;
}
#map{
    height:100%;
    width:40%;
    float:left;
    position: absolute;
}     

http://jsfiddle.net/22Dhy/