javascript - 谷歌地图未显示在右对齐的 div 中
问题描述
在我的 html 代码中,我有两个 div,我想在我的右对齐 65% div 中显示我的地图。我已经尝试将每个地图的父母高度设置为 100%,并且还遵循文档中的样式,然后我也无法显示地图任何帮助将不胜感激。谢谢
jsfiddle 链接:https ://jsfiddle.net/1w5u3t8y/
.row {
height: 100%;
}
.column {
float: left;
height: 100%;
}
.left {
width: 35%;
background: #2193b0;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding-right: 20px;
}
.right {
background-color: grey;
width: 65%;
}
.card {
width: 450px;
height: 180px;
background-color: #fff;
background: linear-gradient(#f8f8f8, #fff);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
border-radius: 6px;
overflow: hidden;
position: relative;
margin: 1.5rem;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#map {
height: 100%;
position: absolute;
}
<div class="row" style="height:100%;">
<div class="column left" />
<div class="column right" style="height:100%;">
<div class="card" id="mapwrapper" style="height:100%;">
<div class="card-header">
Add your Location
<!-- <a href="#" class="btn btn-info float-right ml-3" onclick="submitloc()">Save My Location</a> -->
<input type="text" class="form-control float-right" style="width:300px;" id="location-text-box" placeholder="Enter place to search">
</div>
<div id="map" style="height:100%; width:65%"></div>
</div>
</div>
</div>
解决方案
我在下面更新了您的 HTML 和 CSS。我已经实现了 Flexbox,它有助于解决您的布局问题。我们还需要查看您的 Google 地图 JavaScript 以进行测试。
HTML
<div class="row">
<div class="column left">
</div>
<div class="column right">
<div class="card" id="mapwrapper">
<div class="card-header">
Add your Location
<!-- <a href="#" class="btn btn-info float-right ml-3" onclick="submitloc()">Save My Location</a> -->
<input type="text" class="form-control float-right" style="width:300px;" id="location-text-box" placeholder="Enter place to search">
</div>
<div id="map"></div>
</div>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.row {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
height: 100%;
}
.left {
flex: 1 1 35%;
padding-right: 20px;
background-color: #2193b0;
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
background: linear-gradient(to right, #6dd5ed, #2193b0);
}
.right {
flex: 1 1 65%;
background-color: grey;
}
.card {
width: 450px;
height: 180px;
margin: 1.5rem;
position: relative;
overflow: hidden;
background-color: #fff;
background: linear-gradient(#f8f8f8, #fff);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
border-radius: 6px;
}
#map {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
}