Question

我目前有一张离子卡，里面有JSON对象的图片。我想让照片彼此相邻。在屏幕截图中，您可以看到我想要的内容。这就是我要的： https://gyazo.com/ae64a28f3b6f471a063eb43fed7fb535

这就是我所拥有的： https://gyazo.com/942431243bf9db75b5bf8d945bb36ce2

有3张照片，但你无法看到它。

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

<ion-content>
  <ion-searchbar>
</ion-searchbar>
  <ion-grid>
    <ion-row>
      <ion-col col-12 col-md *ngFor="let item of items">
        <ion-card>
          <ion-item>
            <h2>{{ item.name }}</h2>
            <p>{{ item.count }} leerlingen</p>
            </ion-item>
            <ion-item *ngFor="let i of item.items">
           <ion-avatar>
             <img src="{{i.avatar}}">
           </ion-avatar>
         </ion-item>
        </ion-card>
      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>

Answer 1

此处<ion-item>和<ion-avatar>的css也会产生影响。所以，我认为你应该使用自己的<div>。像这样：

而不是：

<ion-item *ngFor="let i of item.items">
    <ion-avatar>
        <img src="{{i.avatar}}">
    </ion-avatar>
</ion-item>

使用此：

<div style="display: inline-block;" *ngFor="let i of item.items">
    <img src={{i.avatar}}>
</div>

解决方案是使用/尝试css属性display的值。与display: inline-block一样。

我想将离子卡中的图像显示在彼此旁边

1 个答案: