时间戳

首页 > 解决方案 > 卡片无法添加页脚部分

html - 卡片无法添加页脚部分

问题描述

我将我的大学项目用于 Ionic 3 并尝试使用这种图像类型 [![查看图像][1]][1]

卡片，但它对我不起作用，我可以放置页眉部分但卡片页脚部分不起作用，任何人都知道如何正确执行此操作，我想知道如何创建附加的图像类型卡片，

我的实时stackblitz 实时代码 请帮我修复它谢谢，

那是我的代码

html

   <ion-grid>
      <!--Task 1st row-->
      <ion-row>
        <ion-col col-4>
          <!--card-success-->
          <ion-card class="card-success">
          <ion-card-header>
            <p class="txt-rooms">Room 101</p>
          </ion-card-header>
          <ion-card-content>

          </ion-card-content>

            <ion-row>


              <ion-col item-end>


                <ion-avatar item-end>
                  <img src="img/marty-avatar.png">
                </ion-avatar>

              </ion-col>

            </ion-row>
        </ion-card>
          <!--card-success-->
        </ion-col>



        <ion-col col-4>

          <!--card-warning-->
          <ion-card class="card-warning">
          <ion-card-header>
            <p class="txt-rooms">Room 102</p>
          </ion-card-header>
          <ion-card-content>

          </ion-card-content>
            <ion-row>


              <ion-col item-end>


                <ion-avatar item-end>
                  <img src="img/marty-avatar.png">
                </ion-avatar>

              </ion-col>

            </ion-row>
        </ion-card>
          <!--card-warning-->

        </ion-col>


        <ion-col col-4>

          <!--card-info-->
          <ion-card class="card-info">
          <ion-card-header>
            <p class="txt-rooms">Room 103</p>
          </ion-card-header>
          <ion-card-content>

          </ion-card-content>
            <ion-row>


              <ion-col item-end>


                <ion-avatar item-end>
                  <img src="img/marty-avatar.png">
                </ion-avatar>

              </ion-col>

            </ion-row>
        </ion-card>
          <!--card-info-->

        </ion-col>


      </ion-row>
      <!--Task 1st row-->
  </ion-grid>

**css**

.

card {
    background: #FFF;
    border-radius: 1rem;
    width: 100%;
    height: 17vh;
    -webkit-box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
    box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
  }

  .card-md {
    margin: 0px;}
  .card-ios {
    margin: 0px;}


/*card-success*/
  .card-success.card {
    background: #fffae7;
    border-radius: 1rem;
    width: 100%;
    height: 17vh;
    -webkit-box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
    box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
  }
  /*card-success*/


  /*card-warning*/
  .card-warning.card {
    background: #fff0ec;
    border-radius: 1rem;
    width: 100%;
    height: 17vh;
    -webkit-box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
    box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
  }
  /*card-warning*/

  /*card-info*/
  .card-info.card {
    background: #edf5ff;
    border-radius: 1rem;
    width: 100%;
    height: 17vh;
    -webkit-box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
    box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
  }
  /*card-info*/

标签： htmlcssionic-framework

解决方案

在这里，我为你做了第一张卡片；) https://stackblitz.com/edit/ionic-bzaxt8

使用离子网格以您需要的方式放置物品。这里有很好的指南：https ://www.joshmorony.com/how-to-create-complex-layouts-in-ionic/

推荐阅读