两个并排的div，一个带有Google地图，另一个具有固定宽度。

Question

我想使用两个DIV并排显示。第一个DIV具有响应式宽度和内置的谷歌地图...第二个DIV具有固定宽度。

jsFiddle示例

HTML

<div class="wrapper">
    <div id="map"></div>
    <div class="right"></div>
</div>

CSS

.wrapper{
    width: 90%;
    margin: 0px auto;
}
#map {
    height: 300px;
}
.right {
    background: orange;
    width: 250px;
    float: right;
    height: 300px;
}

- Patrik

Answer 1

编辑删除JS，调整CSS + Fiddle

http://jsfiddle.net/FXk4x/10/

JS

var map;
var elevator;
var myOptions = {
    zoom: 4,
    center: new google.maps.LatLng(50, 10),
    mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map')[0], myOptions);
var markers = [];

使用CSS定位：

CSS

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;
    border:solid 1px red;
    position :relative;
    width: 90%;
    margin: 0px auto;
    height:300px;
}
#map {

    position :absolute;
    top:0;
    left:0;
    bottom:0;
    right:250px;

  border: 1px solid;
}
.right {
  position : absolute;
  top:0;
  right:0;
  background: orange;
  width: 250px;    
  height: 300px;
}

常见问题：CSS 定位 点击这里

- ColoO

---

谢谢。:) 但是，它并不工作得很好。我不想给谷歌地图设置绝对位置。如果我尝试给谷歌地图设置绝对位置，它就停止工作了。当我不给地图设置绝对位置并且地图显示良好时，第二个div就会出现问题...你可以在这里看到并尝试一下：http://jsfiddle.net/fLwwV/ - Patrik

我调整了JavaScript的大小，并修复了#map的左侧位置。它对我起作用了。 - ColoO

是的，现在好多了，但当你调整浏览器大小时... 谷歌地图会变形。 - Patrik

哦，我不需要调整大小的JS :p - ColoO