Question

我需要一些帮助来定位静态Google地图地图。

有两个问题：

将静态地图放在与写作相同的级别/行上，左边是书写，右边是地图
将页脚保持在页面底部

HTML：

<div class="wrapper">
    <ul class="nav">
        <li class="home"><a href="#">Home</a>

        </li>
        <li class="location"><a href="#">Location</a>

        </li>
        <li class="itinerary"><a href="#">Itinerary</a>

        </li>
        <li class="photos"><a href="#">Howard & Mary</a>

        </li>
    </ul>
</div>

<h1>Location</h1>

<p class="grid">USS NORTH CAROLINA
    <br/>Address: 1 Battleship Rd NE, Wilmington, NC 28401, United States Telephone: + 1 910-251-5797 wesbite: <a href="http://www.battleshipnc.com/Visit/Directions">www.battleshipnc.com/</a>

</p>
<div class="map">
    <p class="static_map">
        <img src="http://maps.googleapis.com/maps/api/staticmap?parameters?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&size=400x300&sensor=false&markers=1+Battleship+Rd,+Wilmington,+North+Carolina+28401" alt+ "1 Battleship Rd, Wilmington, North Carolina 28401"/>
    </p>
</div>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type="text/javascript" src="https: //maps.googleapis.com/maps/api/js?key=AIzaSyDM-P7a6oHU7e-guJpKQPADlGPtX1_iPBU&sensor=false"></script>
<footer class="main-footer">
        <h1 class="tri">All donations & proceeds will go towards <a href="http://www.dare2tri.org/" class="dare">Dare 2 Tri</a></h1>

</footer>

CSS：

body {
    background-image: url("http://i.istockimg.com/file_thumbview_approve/1985611/2/stock-photo-1985611-uss-north-carolina.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

h1 {
    text-align: center;
    color: #0051c2;
    font-size: 80px;
}
.grid {
    color: #0051c2;
    font-size: 40px;
    width: 45%;
    margin-left: 10px;
}
.map {
    margin-right: 10px;
    float: right;
}
.wrapper {
    position: relative;
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.main-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: black;
    opacity: 0.8;
    text-align: center;

}
.tri {
    color: white;
    font-size: 16px;

}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #0051c2;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #0051c2;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #0051c2;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 20px;
    border: 0;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.photos:hover {
    background-color: #0051c2;
    border-radius: 8px;
}
ul.nav li a {
    color: #faf3bc;
    display: block;
    text-decoration: none;
}

Answer 1

第一期：将地址与地图对齐

将“网格”p变为div并将float:left添加到.grid CSS。

示例：http://codepen.io/anon/pen/kwJcE

第二期：粘性页脚

重复问题，请参阅此处：Make footer stick to bottom of page correctly

直接链接："A CSS Sticky Footer that just works"

奖金第三期：糟糕的设计

我永远不会告诉任何人他们正在学习'错误'但是检查网格系统/框架，特别是响应式网格系统。它将帮助您更快地建立更好的审美。

静态地图定位

1 个答案: