如何使Ionic 4ion-ol达到相同的高度？ [英] How do make Ionic 4 ion-col the same height

问题描述

我有一个带有主卡片的页面，其中包含网格中的其他小卡片。我希望所有列具有相同的高度，这将是特定行内的列之间的最大高度。

这是我的模板和样式：

<ion-card color="blue">
  <ion-card-content class="welcome-card-content">
    <ion-grid class="ion-no-padding">
      <ion-row >
        <ion-col >
            <ion-card color="white-blue"class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="flash"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >a very long text that takes a lot of vertical space</ion-text>
                   </ion-row>

                </ion-card-content>
            </ion-card>
        </ion-col>
        <ion-col>
            <ion-card color="white-blue" class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="add"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >simple text</ion-text>
                   </ion-row>

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

css文件

.small-card{
  margin: 3px;
  height: inherit;
}


 ion-col{
   margin: 0px;
   padding: 0px;
   height: 100%;
 }

 ion-row{
   width: 100%;
   height: auto;
  }

这是我到目前为止的结果：

推荐答案

以下是您的解决方案：

  <div color="primary" class="main-card">
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>

SCSS文件

 .main-card {
  background: var(--ion-color-primary);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  margin: 12px;
  overflow: hidden;
  ion-col {
    display: flex;
    justify-content: center;
    padding: 4px;
  }
  ion-card {
    background: #55bdef;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
  }
  ion-card-content {
    color: #fff;
  }
}

这将解决您的问题。

这篇关于如何使Ionic 4ion-ol达到相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！