Question

我正在为当地教会建立一个网站作为慈善工作。对于html / css，我有点像业余爱好者。

由于某种原因，文字排列不正确。我希望文本直接在地图的右侧。相反，它排在它下面。

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

Answer 2

将float:left;替换为.text中的display:inline-block;，并将display:inline-block;添加到#map。

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

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

更新的jsfiddle可以在这里找到： https://jsfiddle.net/wyj23jzs/1/

糟糕的是，文本是靠近地图的。要添加一些空间，只需将margin-right:10px;添加到#map：

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

Answer 3

使用CSS display :inline-block或display :inline

在您的情况下，您可以使用float

#map {
    float:left;
}
.text1 {
font-size: 150%;
    float:right;
}

无法将div元素排成一行

3 个答案: