html - 无法让 div 元素对齐

Question

作为慈善工作，我正在为我本地的教堂制作一个网站。在 html/css 方面，我有点业余。

由于某些原因，文本没有正确对齐。我想要直接在 map 右侧的文字。相反，它在它下面排列。

HTML

<!-- SECTION 1 -->

<br><br><br><br>
<div class="main_body2 main_border">
<div id="map"></div>

<script>

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;

function initialize() {
  var bangalore = { lat: 40.666070, lng: -74.11529 };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 17,
    center: bangalore
  });

  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  addMarker(bangalore, map);
}


function addMarker(location, map) {
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex++ % labels.length],
    map: map
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div class="text">
<p class="text1">St John Byzantine Catholic Church <br>
15 E 26th St <br>
Bayonne, NJ 07002</p>
</div>
</div>

CSS

.text {
float: left;
width: 300px;
height: 300px;
}

.text1 {
font-size: 150%;
}

.main_body3 {
background-color: #fff;
margin: 0 auto;
margin-top: 125px;
margin-bottom: 50px;
padding: 10px;
width: 1000px;
height: 500px; 
border-radius: 7px;
}

.main_border {
border: 10px solid transparent;
padding: 0;
-webkit-border-image: url(../img/border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(../img/border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(../img/border.png) 30 stretch;
}

这是 jsfiddle:

https://jsfiddle.net/wyj23jzs/

这是网站:

http://saintjohnbayonne.com/Contact%20Us/index.php

Answer 1

你应该改变你的#map和.text类如下

CSS

.text {
  display: inline-block;
  vertical-align:top;
  width: 300px;
  height: 300px;
}

#map {
  display:inline-block;
  width: 500px;
  height: 500px;
}