两个 div 并排，一个带有谷歌地图，第二个带有固定宽度答案

【问题标题】：Two divs side by side, one with google map and second with fixed width两个 div 并排，一个带有谷歌地图，第二个带有固定宽度
【发布时间】：2013-11-20 10:04:22
【问题描述】：

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

jsFiddle example

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;
}

【问题讨论】：

标签： html google-maps-api-3

【解决方案1】：

编辑删除 js 调整大小/更正 css +fiddle

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

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 位置 here

【讨论】：

谢谢。 :) 但是不，它不能很好地工作。我不想将绝对位置设置为谷歌地图。如果我尝试将绝对位置设置为谷歌地图，它会停止工作。当我没有为地图设置绝对位置并且地图显示良好时，第二个 div 有问题......你可以在这里查看并尝试：jsfiddle.net/fLwwV
我调整了 javascript 的大小并修复了 #map 的左侧位置。它为我工作
是的，现在好多了，但是当你调整浏览器大小时……谷歌地图会变形。
哦，我不需要调整 js 大小：p