使离子卡并排放置相同的高度

Question

我有两张并排的卡片：

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          ...
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
         ...
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

如何使它们高度相同？

Answer 1

HTML 文件:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Projected</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit felis, luctus in vehicula id, egestas
            sed magna.</p>
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Required</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

CSS 文件:

ion-col {
  display: flex;
}
ion-card {
  padding: 5px;
}

使离子卡并排放置相同的高度

Make ionic cards side by side the same height

angular

ionic-framework

ionic3

ionic4