【问题标题】:CSS Card ionic left div with descriptionCSS Card 离子左 div 与描述
【发布时间】:2018-12-26 08:14:33
【问题描述】:

我正在尝试获得如下所示的卡片:

到目前为止我所拥有的:

<ion-card>
  <ion-item>
    <ion-avatar item-start> <img src="img/marty-avatar.png"> </ion-avatar>
    <h2>Marty McFly</h2>
  </ion-item> <img src="img/advance-card-bttf.png">
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
</ion-card>

有人可以帮助我吗?

【问题讨论】:

  • 您好,您可以发布一些您目前编写的代码吗?
  • 有人会帮助你。但你必须先帮助自己。尝试在您的设备上解决它,然后在这里分享您的尝试。
  • 是:

    Marty McFly

    ​​>

    等一下。等一下,博士。呃……你是说你建造了一台时间机器……是用德洛雷恩人建造的?!哇。这很重。

  • 你能不能把它分享为纯html css,这样我们就可以看到ui设计了
  • 现在好点了吗?

标签: html css ionic-framework ionic3


【解决方案1】:

使用离子响应网格:https://ionicframework.com/docs/theming/responsive-grid/

见代码:https://stackblitz.com/edit/ionic-i21sbi?file=pages/home/home.html

<ion-card>
  <ion-grid>
   <ion-row>
    <ion-col>
  <img src="https://material.angular.io/assets/img/examples/shiba1.jpg">
  </ion-col>
  <ion-col>
  <ion-item>
    <ion-avatar item-start> <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"> </ion-avatar>
    <h2>Marty McFly</h2>
  </ion-item> 
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
  </ion-col>
   </ion-row>
  </ion-grid>

</ion-card>

【讨论】:

  • 告诉我更多帮助
猜你喜欢
  • 2011-05-11
  • 2014-05-28
  • 1970-01-01
  • 2020-11-05
  • 1970-01-01
  • 2013-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多