并排两个div,一个带有google map,另一个带有固定宽度

帕特里克

我想并排使用两个DIV。第一个具有响应宽度的DIV,内部带有google map ...第二个具有固定宽度的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;
}
可乐

编辑删除JS调整大小/正确的CSS +小提琴

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位置 在这里

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

并排两个div,一个带有google map,第二个带有固定宽度

来自分类Dev

可伸缩行,每行5个div,一个带有固定宽度,另一个四个带百分比

来自分类Dev

如何获得两个元组 - 一个带有单词,另一个带有长度?

来自分类Dev

并排放置两个面板(一个带有TextCtrl)-wxPython

来自分类Dev

Bootstrap 两列并排,一个全宽,另一个是图像,另一个是在带有文本的容器中

来自分类Dev

两个div并排,一个居中,另一个居右

来自分类Dev

两个div并排,一个居中,另一个居右

来自分类Dev

两个带有外键的表引用另一个NameError

来自分类Dev

如何使两个div响应(一个带有文本,一个带有图片)?

来自分类Dev

并排放置两个div,一个可调整大小,另一个具有相同的高度

来自分类Dev

MySQL对两个表进行联合,其中一个带有时间戳,另一个带有日期

来自分类Dev

MySQL对两个表进行联合,其中一个带有时间戳,另一个带有日期

来自分类Dev

当另一个元素具有固定宽度时,如何使div元素自动适合

来自分类Dev

两个字体很棒的箭头,一个箭头在另一个箭头上方,并带有一个圆圈

来自分类Dev

两个字体很棒的箭头,一个箭头在另一个箭头上方,并带有一个圆圈

来自分类Dev

另一个div内带有“空白:nowrap;”的背景 不能覆盖所有宽度

来自分类Dev

如何并排添加另一个带有 css 的“阅读更多”按钮

来自分类Dev

角ng类,具有两个类,一个来自变量名,另一个带有条件

来自分类Dev

发出带有FormStateInterface :: getTriggeringElement()的“两个二维'添加另一个项目'”的问题

来自分类Dev

使用bash脚本在另一个文件中创建带有两个或多个参数的文件

来自分类Dev

两个带有成员函数的类,它们从另一个类获取指向对象的指针

来自分类Dev

在一个JFrame中并排放置两个JPanel,其中一个JPanel具有固定宽度

来自分类Dev

在一个JFrame中并排放置两个JPanel,其中一个JPanel具有固定的宽度

来自分类Dev

需要帮助将顶部栏固定在另一个带有滚动条的div中

来自分类Dev

在带有 gradle 的 NDK 上编译两个项目,其中一个依赖于另一个的二进制文件

来自分类Dev

如果一个DIV固定,是否可以并排对齐两个DIV?

来自分类Dev

将宽度100%设置为div在两个固定宽度div的中间,都在另一个100%宽度div内

来自分类Dev

外div中两个元素并排,一个左侧,一个右侧

来自分类Dev

外div中两个元素并排,一个左侧,一个右侧

Related 相关文章

  1. 1

    并排两个div,一个带有google map,第二个带有固定宽度

  2. 2

    可伸缩行,每行5个div,一个带有固定宽度,另一个四个带百分比

  3. 3

    如何获得两个元组 - 一个带有单词,另一个带有长度?

  4. 4

    并排放置两个面板(一个带有TextCtrl)-wxPython

  5. 5

    Bootstrap 两列并排,一个全宽,另一个是图像,另一个是在带有文本的容器中

  6. 6

    两个div并排,一个居中,另一个居右

  7. 7

    两个div并排,一个居中,另一个居右

  8. 8

    两个带有外键的表引用另一个NameError

  9. 9

    如何使两个div响应(一个带有文本,一个带有图片)?

  10. 10

    并排放置两个div,一个可调整大小,另一个具有相同的高度

  11. 11

    MySQL对两个表进行联合,其中一个带有时间戳,另一个带有日期

  12. 12

    MySQL对两个表进行联合,其中一个带有时间戳,另一个带有日期

  13. 13

    当另一个元素具有固定宽度时,如何使div元素自动适合

  14. 14

    两个字体很棒的箭头,一个箭头在另一个箭头上方,并带有一个圆圈

  15. 15

    两个字体很棒的箭头,一个箭头在另一个箭头上方,并带有一个圆圈

  16. 16

    另一个div内带有“空白:nowrap;”的背景 不能覆盖所有宽度

  17. 17

    如何并排添加另一个带有 css 的“阅读更多”按钮

  18. 18

    角ng类,具有两个类,一个来自变量名,另一个带有条件

  19. 19

    发出带有FormStateInterface :: getTriggeringElement()的“两个二维'添加另一个项目'”的问题

  20. 20

    使用bash脚本在另一个文件中创建带有两个或多个参数的文件

  21. 21

    两个带有成员函数的类,它们从另一个类获取指向对象的指针

  22. 22

    在一个JFrame中并排放置两个JPanel,其中一个JPanel具有固定宽度

  23. 23

    在一个JFrame中并排放置两个JPanel,其中一个JPanel具有固定的宽度

  24. 24

    需要帮助将顶部栏固定在另一个带有滚动条的div中

  25. 25

    在带有 gradle 的 NDK 上编译两个项目,其中一个依赖于另一个的二进制文件

  26. 26

    如果一个DIV固定,是否可以并排对齐两个DIV?

  27. 27

    将宽度100%设置为div在两个固定宽度div的中间,都在另一个100%宽度div内

  28. 28

    外div中两个元素并排,一个左侧,一个右侧

  29. 29

    外div中两个元素并排,一个左侧,一个右侧

热门标签

归档