Machen Sie ionische Karten nebeneinander auf die gleiche Höhe

Duncan Law

Ich habe zwei Karten nebeneinander:

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

Wie bekomme ich sie auf die gleiche Höhe? Bildbeschreibung hier eingeben

Swapnil Rajput

HTML-Datei:

<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-Datei:

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

Verwandte Artikel

Flexbox - gleiche Höhe auf allen Karten

n1234 Ich habe einen Flexbox-Container mit 3 Karten und ich versuche herauszufinden, wie ich die Karten auf die gleiche Höhe bringen kann, aber ich habe nicht viel Erfolg (habe versucht, die Richtung zu ändern, flex-direction: column;was nicht funktioniert hat

Stellen Sie alle zwei Elemente auf die gleiche Höhe

Christian Andernsen Ich habe einen Container mit einer Anzahl von Kindern, die gleich groß sein müssen, nur zu zweit. Zum Beispiel müssen das erste und das zweite Element so hoch sein wie das höchste der beiden und das dritte und vierte Element müssen so hoch

mach den Knopf und teile die gleiche Höhe nebeneinander

Vulkan 3 In der unteren rechten Ecke habe ich 1 Schaltfläche zum Öffnen eines Chats, dann eine Div, in der die aktuellen Online-Benutzer angezeigt werden, und eine weitere Schaltfläche, um zum oberen Rand der Seite zu gelangen. Ich benutze das <button>Tag auf