Question

我正在尝试将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>

Answer 1

您可以尝试使用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>

Answer 2

我正在尝试将2个离子卡放在同一行中。我正在建立一个混合动力 应用，我只需要用于网络的视图

如果我理解正确，则希望卡的布局从移动视图中的垂直堆叠更改为桌面视图中的水平对齐，您可以结合使用width和breakpoint属性来创建一个网格首先是堆叠在超小的屏幕上，然后变成小屏幕上的水平，如果需要的话，请查看我在ionic3中制作的快速示例

检查 WORKING STACKBLITZ

您可以将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>

希望这会有所帮助！

如何仅将2个离子卡放在同一行中以进行Web查看？

2 个答案:

检查 WORKING STACKBLITZ