两个并排的div，一个用谷歌地图，另一个用固定宽度

问题描述

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

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

解决方案

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：固体1px红色; 
职位：亲属; 
宽度：90％; 
 margin：0px auto; 
 height：300px; 
} 
 #map {
 
 position：absolute; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：250px; 
 
 border：1px solid; 
} 
 .right {
 position：absolute; 
 top：0; 
 right：0; 
 background：orange; 
 width：250px; 
 height：300px; 
} 
  

常见问题CSS位置

I want to use two DIVs, side by side. First DIV with responsive width and with google map inside... And second DIV with fixed width.

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

解决方案

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 = [];

Use css position :

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

FAQ CSS position here

这篇关于两个并排的div，一个用谷歌地图，另一个用固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！