css - 将 Ionic 卡分成两半。我想在右边显示学生，在左边显示老师

Question

这是我目前拥有的:https://gyazo.com/7b0c0d53beef6846545bece011332cd5 .你可以看到我有很多相邻的图片，但我想在 ionic 卡中有两半。左上角是组名，左下角是老师，右边是组里的学生。我想要这样:https://gyazo.com/d5e71aa9cfe6de9f121ce236f951a6d7 .

HTML

    <ion-header>
  <ion-navbar color ="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{ appName }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col *ngFor="let group of groupData">
      <ion-card >
        <ion-item>
          <h2>{{ group.name }}</h2>

              <div class="pic" *ngFor="let student of group.students">
                <img [src]="student.avatar" />
              </div>
              <h3>{{group.students.length}}  Leerlingen</h3>

              <div class="pic" *ngFor="let teacher of group.teachers">
                <img [src]="teacher.avatar" />
              </div>
              <h3>{{group.teachers.length}} leerkrachten</h3>


          </ion-item>

      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>


</ion-content>

CSS

.pic{
  display: inline-block;
  height: 40px;
  width: 40px;
}

Answer 1

除了使用 ion-item，您还可以使用 div 标签并像这样设置内容的一半宽度

<ion-content>
<ion-grid>
  <ion-row>
    <ion-col *ngFor="let group of groupData">
      <ion-card >
        <div class="left-content">
          <div class="pic" *ngFor="let teacher of group.teachers">
             <img [src]="teacher.avatar" />
          </div>
          <h3>{{group.teachers.length}} leerkrachten</h3>
        </div>
        <div class="right-content">
          <h2>{{ group.name }}</h2>
          <div class="pic" *ngFor="let student of group.students">
              <img [src]="student.avatar" />
          </div>
          <h3>{{group.students.length}}  Leerlingen</h3>
        </div>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>
</ion-content>

CSS

.left-content {
  width: 50%;
  float: 'left'
}
.right-content {
  width: 50%,
  float: 'right'
}