css如何在自动调整宽度中将一个div依赖于另一个div

时间:2016-11-14 11:49:49

标签: html css

我正在使用Google地图在我的网站上显示,问题是目前地图有CSS属性FIXED而在左边我有一个预订表格,我遇到的问题是,我不想要我的地图100%也在表格后面我希望我的谷歌地图在表格旁边开始,因为我已经创建了一个虚拟div作为形式的精确像素并尝试向左浮动表格但我不知道为什么谷歌地图正在考虑100%的宽度,因为整页让我分享代码让人们更好理解,

这是我创建的超级div

div#mapcontainermega {
    height: 100%;
    position: fixed !important;
    left: 0;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
}

在这个div里面有两个div形式div,它是形式宽度的精确像素

div#mapcenterdiv {
    width: 565px;
    height: 100%;
    float: left;
}

然后是谷歌地图所在的地图div,

div#mapmap {
    width: 100%;
    height: 100%;
    float: left;
}

现在的问题是,当我尝试将宽度减小到40%时,它会随着表格一起显示,但随后在不同的屏幕尺寸上,右侧会出现明显的空白区域?我怎样才能让它变得敏感,以便明确的空间不会出现?

refer to this image for better understanding

1 个答案:

答案 0 :(得分:1)

如果您不希望地图的宽度为100%&动态猜测宽度然后使用CSS的calc()函数

div#mapmap {
    width: calc(100% - 565px);
    height: 100%;
    float: left;
}

我仍然建议您为表单提供%宽度,而不是px,然后将两个子div之间的宽度分开

了解它 - https://developer.mozilla.org/en/docs/Web/CSS/calc