ionic2：如何将3张卡片放到屏幕上？

Question

我正在使用Ionic2，我想做那样的设计：

我制作了购物车，但我无法将该位置设为图像 这是卡片代码：

<ion-grid>
        <ion-row wrap>
            <ion-col width-50>
                <ion-card>
                    <ion-item>
                        <ion-icon name="start" item-start></ion-icon>
                        <ion-icon name="ios-heart-outline" item-end></ion-icon>
                    </ion-item>

                    <ion-card-content text-center>
                        <ion-item text-center>
                            <img src="http://safe-pay.co/safepay/public/uploadedimg/user/avatar.png" style="width:40px;height:40px" />
                        </ion-item>
                        <ion-item>
                            <span>Canon Power <br/>shot SX60 HS</span>
                        </ion-item>
                        <ion-item>
                            <span id="oldPrice">119.900KD</span>
                        </ion-item>
                        <ion-item>
                            <span id="newPrice">100.900KD</span>
                        </ion-item>
                        <ion-item>
                            <ion-rating [numStars]="5" [readOnly]="false" [value]="3" (clicked)="starClicked($event)">
                            </ion-rating>
                        </ion-item>
                    </ion-card-content>
                </ion-card>
            </ion-col>
      </ion-row>
     </ion-grid>

这是输出

任何人都可以告诉我如何定位它们

Answer 1

尝试使用样式使其按照您的意愿对齐..

<div style="width:100%;float:left;">

<ion-card style="width:33.33%;float:left;"> 
   <ion-card-content text-center>
           SAMLE1
   </ion-card-content>
</ion-card>

<ion-card style="width:33.33%;float:left;"> 
   <ion-card-content text-center>
           SAMLE2
   </ion-card-content>
</ion-card>

<ion-card style="width:33.33%;float:left;"> 
   <ion-card-content text-center>
           SAMLE3
   </ion-card-content>
</ion-card>

</div>