Question

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

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

我的生活stackblitz live code 请帮我解决它，谢谢，

那是我的代码

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*/

Answer 1

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

使用离子网格按所需方式放置物品。此处的好指南：https://www.joshmorony.com/how-to-create-complex-layouts-in-ionic/

卡无法添加页脚部分

1 个答案: