我正在尝试使用左侧滚动列(图像为链接)和显示Google地图的固定全屏右栏创建布局。我无法弄清楚为什么地图显示为倾斜。 Here's a screnshot of my problem.
$(window)
.resize(function() {
var h = $(window).height(),
offsetTop = 40; // Calculate the top offset
$("#map-canvas").css("height", h - offsetTop);
})
.resize();
html {
height: 100%;
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
margin: 0px;
display: flex;
padding-left: 0px;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
padding-left: 0px;
margin: 0px;
}
#left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40%;
background-color: white;
padding: 0px;
margin: 0px;
}
#right {
background-color: #f3f3f3;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 60%;
flex: 1;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 0px;
margin: 0px;
}
ul {
display: inline-flex;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: flex;
padding: 0px;
margin: 0px;
}
img {
min-width: 450px;
width: 100%;
padding: 0px;
margin: 0px;
}
#map_canvas {
flex: 2;
}
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="left" class="column">
<div class="bottom">
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
</div>
</div>
<div id="right" class="column">
<div class="bottom">
<div id="map-canvas">
</div>
</div>
</div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12
});
}
</script>
<!-- script references -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK1QRzq4tKEN63PxIA6jKfyypkoRn326M&callback=initMap" async defer></script>
</body>
Here's my codepen link,如果有帮助的话。
我希望它看起来像this,但我无法弄清楚我到底做错了什么。
有什么想法吗?在此先感谢帮助初学者!
答案 0 :(得分:1)
Google地图使用HTML <img />
标记来渲染地图。
在您的代码中,您有:
img {
min-width: 450px;
width: 100%;
padding: 0px;
margin: 0px;
}
运行代码时,覆盖 Google地图 <img />
标记的样式。
正确的方法是使用以下方法限制图像的渲染区域:
.container-content img {
margin: 0px;
min-width: 450px;
padding: 0px;
width: 100%;
}
顺便说一句,您错过了HTML中的<ul>
标记。
根据您的link了解此演示。
ul {
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
}
.flexbox-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100vh;
}
.flexbox-container #left_container {
flex: 1;
padding: 0;
}
.container-content {
overflow-y: auto;
height: 100vh;
}
.flexbox-container #map_container {
margin: 0;
}
#map_canvas {
flex: 2;
}
.container-content img {
margin: 0;
min-width: 450px;
padding: 0;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="flexbox-container">
<div id="left_container">
<div class="container-content">
<ul>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
</ul>
</div>
</div>
<div id="map_canvas"></div>
</div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById("map_canvas"), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK1QRzq4tKEN63PxIA6jKfyypkoRn326M&callback=initMap" async></script>