-2
我一直無法使用CSS強制Google地圖強制到某個位置。 3 column layout。我想要這樣。當我在中心列中插入谷歌地圖api鏈接時，它會抵消並破壞所有內容。我一直在想方設法讓它在列中強制它，但仍然無法正常工作。如何強制Google地圖鎖定在中心列的範圍內？
我希望它是3列布局，中心列多數大小。然後是橫跨整個寬度的頁眉和頁腳。
該地圖目前很小，但我希望它是中央列的整個大小。
html,
body {
height: 100%;
\t padding: 0;
\t margin: 0;
}
body {
\t font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
}
header {
\t position: absolute;
\t width: 500px;
\t height: 250px;
\t top: 50%;
\t left: 50%;
\t margin-top: -125px;
\t margin-left: -250px;
\t text-align: center;
}
header h1 {
\t font-size: 60px;
\t font-weight: 100;
\t margin: 0;
\t padding: 0;
}
div#div_map {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
display: inline-block;
}
#map {
width: 25%;
height: 25%;
margin: 0 auto 0 auto;
display: inline-block;
}
.container {
position: relative;
text-align: center;
}
.container div {
\t height: 100%;
}
div.container, section.main {
height: 100%;
}
.column-left {
\t width: 25%;
\t left: 0;
\t background: #00F;
\t position: absolute;
}
.column-center {
\t width: 50%;
\t background: #933;
\t margin-left: 25%;
\t position: absolute;
}
.column-right {
\t width: 25%;
\t right: 0;
\t position: absolute;
\t background: #999;
}<!doctype html>
<html>
<head>
\t <meta charset="utf-8">
\t <title></title>
\t <link rel="stylesheet" href="index.css" />
\t <script>
\t \t function initMap() {
\t \t \t var latlng = {
\t \t \t \t lat: 40.816714399999995,
\t \t \t \t lng: -120.90523610000001
\t \t \t };
\t \t \t var map = new google.maps.Map(document.getElementById('map'), {
\t \t \t \t zoom: 15,
\t \t \t \t center: latlng
\t \t \t });
\t \t \t map.setOptions({
\t \t \t \t streetViewControl: false
\t \t \t });
\t \t \t addMarker(latlng);
\t \t \t // icon: 32x32
\t \t \t function addMarker(latlng) {
\t \t \t \t var marker = new google.maps.Marker({
\t \t \t \t \t position: latlng,
\t \t \t \t \t icon: 'http://icons.iconarchive.com/icons/graphics-vibe/media-pin-social/32/rss-feed-icon.png',
\t \t \t \t \t map: map
\t \t \t \t });
\t \t \t }
\t \t }
\t </script>
\t <script async src="https://maps.googleapis.com/maps/api/js?callback=initMap">
\t </script>
</head>
<body>
\t <div class="container">
\t \t <header></header>
\t \t <section class="main">
<div class="column-left" >Column left</div>
<div class="column-center" >
<div id="map" style="display:inline-block;"/>
</div>
<div class="column-right" >Column right</div>
\t \t \t <!-- <h3 style="text-align: center;"></h3> -->
<!-- <div id="map" /> -->
\t \t </section>
\t \t <footer></footer>
\t </div>
</body>
</html>
@Pat哦拍攝。對。嗯，我一般都很習慣使用CSS。當我糾正它，並使地圖的高度/寬度均爲100％。附在地圖上的div也是100％的高度。一直延伸下去。我怎樣才能得到它不影響谷歌地圖的div，但隻影響我自己的，那是列。 'div＃div_map {width = 100％;寬度：100％; 身高：100％; 職位：固定; text-align：center; display：inline-block; } #map { width：100％; 身高：100％; margin：0 auto 0 auto; display：inline-block; } – DKJ
[以上結果]（https://gyazo.com/edddeb3b91b44c68a60af5d2f7be6820） – DKJ
@Dez div標籤不是自動關閉。 @DKJ你想要地圖100％的寬度和50％的高度嗎？如果你想改變地圖的高度，只需在'#map {..}'裏面改變'height：100％'到任何你想要的內容' – Pat