离子3叶贴图位置

Question

我已经设法在ionic 3中使用了传单地图，但我对定位有一个问题。我想要一个正方形地图下所有的文字滚动时。

我读了一些关于如何使用传单地图的东西，然后我遇到了这句粗话。

.map-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    height: 50%;
    width: 50%;
    }

这是组件html

<div class="map-container">
  <div #map id="map" style="width: 100%; height: 100%">
  </div>
<div>

这就是我使用组件的地方

<ion-content padding>
    <div (swipe)="swipeEvent($event)" *ngIf="event">

          <h1><b>{{event.title | uppercase }}</b></h1>

          <p>{{ event.custom_fields.evcal_srow*1000 | date: ' EEEE MMMM d' }}</p>

          <p><b>{{ event.custom_fields.evcal_srow*1000 | date:  'h:mm a' }} - {{ event.custom_fields.evcal_erow*1000 | date: 'h:mm a' }}</b></p>

          <p>{{event.content | removehtml }}</p>

          <map [data]="event"></map>

          <h1 (click)="AddToCalendar(event)">ADD TO CALENDAR</h1>
    </div>
  </ion-content>

This is what I get

当我将绝对位置更改为其他任何位置时，它就不会显示。

如何才能使地图只显示在文本下方？

Answer 1

您可以添加这种类型的CSS

.map-container {
float:left;
position: relative;
float:left;

}