Html 静态地图定位

我需要一些关于定位静态谷歌地图的帮助

有两个问题：

使静态地图与书写在同一水平/直线上，书写在左侧，地图在右侧

将页脚保持在页面底部

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>

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;
}

---

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

将你的“网格”

p

变成一个

div

并将

float:left

添加到你的

.grid

CSS中

例如：

第二期：粘性页脚

重复问题，请参见此处：

直接链接：

第三期奖金：糟糕的设计

---

我绝不会告诉任何人他们学习的是“错误的”，但请查看网格系统/框架，尤其是响应网格系统。这将有助于您更快地建造，并具有更好的美感。

请不要规避规则；如果你想在文章中添加到codepen或类似站点的链接，请在文章中包含你的实际代码。好的。但是你能帮我解决这些问题吗？谢谢：）干杯，巴德