Question

我正在使用angular，html和css构建我的第一个副项目，并且已经开始使用flex对齐页面上的项目。我的应用程序的主要部分是简单的卡片，用于显示都会区即将举行的音乐会的信息。

Flex似乎可以自己对齐卡，但是我很难为每张卡的内部中的项目获得一致的对齐方式。当我为卡片内的项目添加样式“ padding-top：30％”或“ justify-content：flex-end”的样式时，它会在不同的卡片上显示不同的对齐方式，因为每张卡片的信息不同，文字长度也不同，导致每个卡的对齐方式不同（下面的屏幕截图）。

我正在使用* ngFor循环浏览所有即将上映的节目，并希望对所有卡应用相同的样式，以使所有内容保持一致的外观。

对不起，我知道将css类和内联样式结合起来有点混乱，我只是想让所有东西在完全清除之前都可以看到我想要的样子。

任何帮助将不胜感激。

Screenshot of cards

    <div class="container">
      <div *ngFor='let show of showsToDisplay'>
        <h6>{{ show.venue.displayName }}</h6>
        <div class="card card:hover border-secondary mb-8 rounded" style="width: 18rem; height: 36rem; padding-bottom: 25%;">
          <img id="cardImage" [src]="show.uri">
          <div class="card-body">
            <h3>{{ show.performance[0].artist.displayName }}</h3>
            <h5 class="text-secondary" *ngIf="show.performance[1]">{{ show.performance[1].artist.displayName }}</h5>
            <h6 class="text-secondary" *ngIf="show.performance[2]">{{ show.performance[2].artist.displayName }}</h6>
            <br>
            <i class="fa fa-calendar"></i> {{ show.start.date }}
            <p class="card-text"></p>
            <div style="justify-content: flex-end;">
              <a href="#" class="btn btn-secondary">Tickets</a>
            </div>
          </div>
        </div>
      </div>
    </div>

.container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

我应该如何对齐卡中的项目？

0 个答案: