Question

我正在研究席卡的动态列表。问题在于迭代的最后一个元素实际上已被裁剪。这可能是什么问题？是因为屈曲吗？有什么建议么？

CSS

section {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-around;
}

.mat-card {
    margin-top: 10px;
}

.container img {
    max-width: 330px;
    max-height: 180px;
    object-fit: cover;
    object-position: 50% 20%;
}

HTML

<div  class="container">
    <mat-card  *ngFor="let teacher of dataSource">
        <mat-card-header>
            <div mat-card-avatar></div>
            <mat-card-title>Jane Doe</mat-card-title>
            <mat-card-subtitle>{{teacher.subject}}</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image [src]="teacher.img" alt="Photo of a Shiba Inu">
        <mat-card-content>
            <table>
                <tr>
                    <th>Phone</th>
                    <td> Lorem ipsum dolor </td>
                </tr>
                <tr>
                    <th>Email</th>
                    <td> Lorem ipsum dolor </td>
                </tr>
            </table>
        </mat-card-content>
        <mat-card-actions>
            <button mat-button>SEND MESSAGE</button>
        </mat-card-actions>
    </mat-card>
</div>

在这里您可以找到图片：https://imgur.com/a/pbOWEzG

最后一张Mat卡不会调整组件高度的大小

0 个答案: