Question

我有两列，左侧是联系信息，右侧是谷歌地图。但是，当我不想要时，谷歌地图正在推动左栏中的所有内容。它可能很简单，但我似乎无法让它工作。我已经包含了CodePen，因此您可以看到问题：https://codepen.io/Macast/pen/QOXoMZ。据我所知，如果没有API密钥，谷歌地图将无法运行，但我已经请求了一个，无论如何都不需要，因为内容仍然在左栏上下推。当屏幕处于移动大小并且工作正常时，列会堆叠，它仅适用于桌面屏幕，其中两列并排显示。谢谢你的帮助！

HTML：

<div id="pageContainer">
    <div class="sectionContainer">
        <div class="leftColumn">
            <h1>Get in Contact</h1>
            <hr style="width: 75%;"/>
            <br />
            <h2>Address</h2>
            <p>95 St. Peter's Road, Netherton, Dudley, West Midlands, DY2 9HN</p>
            <h2>Tel/Fax</h2>
            <p>01384 252943</p>
            <h2>Email</h2>
            <p>info@jfreemanandson.co.uk</p>
        </div>
        <div class="rightColumn">
            <div id="map"></div>
            <script>
              function initMap() {
                var uluru = {lat: -25.363, lng: 131.044};
                var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 16,
                  center: uluru
                });
                var marker = new google.maps.Marker({
                  position: uluru,
                  map: map
                });
              }
            </script>
            <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=APIKEYHERE=initMap">
            </script>

        </div>
    </div>
</div>

CSS：

#pageContainer {
  width: 100%;
  text-align: center;
}

.sectionContainer {
  width: 80%;
  margin: 0 auto;
  display: table;
}

.leftColumn {
  display: table-cell;
  width: 50%;
  background-color: #4f4f4f;
  color: #ffffff;
  box-sizing: border-box;
  padding: 10px;
}

.rightColumn {
  display: table-cell;
  width: 50%;
  background-color: #eeeeee;
  color: #000000;
  box-sizing: border-box;
  padding: 10px;
}

#map {
  height: 600px;
  width: 100%;
}

Answer 1

.leftColumn {
    vertical-align: top;
}

将左列内容重新对齐到顶部。对于彼此相邻的元素，包含vertical-align属性通常会让人头疼。

谷歌地图推送内容？

1 个答案: