我试图在我的离子/角度项目中的一行中显示两列。它只是创建一个堆栈，其中其他内容位于底部

Answer 1

我无法复制该问题，因为您尚未共享所需的所有代码，请查找以下工作示例供您参考！

html

<ion-grid class="rewards-container">
  <ion-row>
    <ng-container *ngFor="let category of categories">
      <ion-col size="6" class="reward-item">
        <ion-card
          class="reward-card"
          *ngFor="let item of categoriesData; let i = index"
        >
          <div>
            <img class="reward-image" [src]="item.imageUrl" />
          </div>
          <div class="reward-details">
            <div class="reward-name">{{ item.name }}</div>
            <div class="reward-cost">{{ item.points }}</div>
          </div>
        </ion-card>
      </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
})
export class ExampleComponent {
  categories = ['A', 'B'];
  categoriesData = [
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
    {
      imageUrl: 'https://placehold.co/200x200',
      name: 'test',
      points: 'test',
    },
  ];
}

堆栈闪电战

Answer 2

单击 {} 按钮时，将代码复制并粘贴到代码示例预编码区域。

您可以使用“unminify”网站来缩进代码。 https://unminify.com 选项卡大小将为 1。将代码粘贴到此处，然后单击 Unminify 按钮。 现在，使用复制按钮，然后在单击 {} 按钮时将 stackoverflow 粘贴到代码示例预编码区域。