Как разместить 2 ионные карты в одном ряду только для просмотра в Интернете?

Question

Я пытаюсь положить 2 ионные карты в один ряд.Я создаю гибридное приложение, и мне нужно это представление только для веб, поэтому мне нужно достичь этого с помощью CSS.Кто-нибудь может помочь с этим?Буду очень признателен, если вы, ребята, сможете поделиться своими идеями?

<ion-card class="level">
  <ion-card-content>
      <ion-card-title>
          LEVEL
        </ion-card-title>
    <ion-row class="progressWrapper">
      <img src="assets/logo/a.png" style="height: 90px;width: 90px;" />
      <span class="levelText">4</span>
    </ion-row>
    <ion-row>
        <ion-col text-center>
          <ion-text color="dark">abc!</ion-text>
        </ion-col>
      </ion-row>
  </ion-card-content>
</ion-card>
<ion-card class="faq">
  <img src="assets/logo/b.svg" class="helpIcon"/>
  <ion-card-content>
    <ion-card-title>
      XP
    </ion-card-title>
    <ion-row class="progressWrapper">
      <img src="assets/logo/c.svg" style="height: 90px;width: 90px;" />
        <span class="progressText">{{xp}}</span>
      </ion-row>
      <ion-row>
          <ion-col text-center>
            <ion-text color="dark">abc !!!!!.</ion-text>
          </ion-col>
        </ion-row>
        <ion-row>
            <ion-col text-center>
              <ion-text color="dark">xxxxxxxx.....</ion-text>
            </ion-col>
          </ion-row>
    </ion-card-content>
</ion-card>

Answer 1

Я пытаюсь положить 2 ионные карты в один ряд. Я строю гибрид приложение, и мне нужно это представление только для веб

Если я правильно понимаю, что вы хотите изменить расположение карточек с вертикально сложенного в мобильном представлении на горизонтально выровненное в настольном представлении, вы можете использовать комбинацию атрибутов ширины и точки останова для создания сетки, которая Начинается наложенным на очень маленькие экраны, а затем становится горизонтальным на маленьких экранах , если это то, что вам нужно, посмотрите быстрый образец, который я сделал ниже, в ionic3

ПРОВЕРКА РАБОЧИЙ СТЕКБЛИЦ

Вы можете изменить свой HTML-код примерно так: ~

<ion-grid>
  <ion-row justify-content-end>
    <ion-col padding size-xs="12" size-sm="6" size-md="6" size-lg="6" align-self-stretch>
      <ion-card class="level">
        <ion-card-content>
          <ion-card-title>
            LEVEL
          </ion-card-title>
          <ion-row class="progressWrapper">
            <img src="assets/logo/a.png" style="height: 90px;width: 90px;" />
            <span class="levelText">4</span>
          </ion-row>
          <ion-row>
            <ion-col text-center>
              <ion-text color="dark">abc!</ion-text>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-col>
    <ion-col padding size-xs="12" size-sm="6" size-md="6" size-lg="6" align-self-stretch>
      <ion-card class="faq">
        <img src="assets/logo/b.svg" class="helpIcon" />
        <ion-card-content>
          <ion-card-title>
            XP
          </ion-card-title>
          <ion-row class="progressWrapper">
            <img src="assets/logo/c.svg" style="height: 90px;width: 90px;" />
            <span class="progressText">{{xp}}</span>
          </ion-row>
          <ion-row>
            <ion-col text-center>
              <ion-text color="dark">abc !!!!!.</ion-text>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col text-center>
              <ion-text color="dark">xxxxxxxx.....</ion-text>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

Надеюсь, это полезно!

Answer 2

Можете ли вы попробовать контейнер с display: flex? Как это:

<div style="display: flex;">
    <ion-card class="level">
        <ion-card-content>
            <ion-card-title>
                LEVEL
            </ion-card-title>
            <ion-row class="progressWrapper">
                <img src="assets/logo/level-box.png" style="height: 90px;width: 90px;" />
                <span class="levelText">4</span>
            </ion-row>
            <ion-row>
                <ion-col text-center>
                    <ion-text color="dark">abc!</ion-text>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card>
    <ion-card class="faq">
        <img src="assets/logo/faq.svg" class="helpIcon" />
        <ion-card-content>
            <ion-card-title>
                XP
            </ion-card-title>
            <ion-row class="progressWrapper">
                <img src="assets/logo/xp-circle.svg" style="height: 90px;width: 90px;" />
                <span class="progressText">{{xp}}</span>
            </ion-row>
            <ion-row>
                <ion-col text-center>
                    <ion-text color="dark">abc !!!!!.</ion-text>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col text-center>
                    <ion-text color="dark">xxxxxxxx.....</ion-text>
                </ion-col>
            </ion-row>
        </ion-card-content>
    </ion-card>
</div>