Angular 如何将2张离子卡放置在同一行中以供浏览？

我想把两张离子卡放在同一排。我正在构建一个混合应用程序，我只需要web视图，所以我需要使用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>

水平仪
4.
abc！
XP
{{xp}
abc！！！！！。
xxxxxxxx。。。。。

您能试试带有

显示：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>


水平仪
4.
abc！
XP
{{xp}
abc！！！！！。
xxxxxxxx。。。。。

我正在尝试将两张离子卡放在同一行。我正在打造一款混合动力车
应用程序，我只需要在web上查看该视图

如果我理解正确，您希望卡片的布局从移动视图中的垂直堆叠更改为桌面视图中的水平对齐，您可以使用宽度和断点属性的组合来创建一个网格，该网格开始堆叠在额外的小屏幕上，然后在小屏幕上变为水平，如果这是您需要的，请查看下面我在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>


水平仪
4.
abc！
XP
{{xp}
abc！！！！！。
xxxxxxxx。。。。。

希望这有帮助
我将无法编辑HTML文件，因为当前视图（垂直对齐的卡）非常适合移动设备，我只需要在web视图中并排放置相同的卡。您可以使用媒体查询，我将无法编辑HTML文件，因为当前视图（垂直对齐的卡）非常适合移动设备，我只需要在web视图中并排放置相同的卡片。我需要web和移动视图才能工作。没有得到你！您是否使用我在这里提供的代码进行了测试？事实上，我刚刚根据您的需要对其进行了重构，以使用网格系统！只需将粘贴从此处复制到您的应用程序，并使用此代码检查一个或多个应用程序，然后让我知道这是否是您所期望的，使用此代码检查移动和web视图并验证！是的，我想说的是，在移动视图中，两张卡应该是垂直的，但在web视图中是水平的。有了这段代码，它在移动和网络中都是水平的。我试过运行它。@Battu更新了代码和stackblitz演示，现在检查一下，它能满足您的要求！您可以调整stackblitz窗口的大小并进行检查！