时间戳

首页 > 解决方案 > 角拉伸垫卡

angular - 角拉伸垫卡

问题描述

我需要创建一个响应式垫卡。我的意思是垫卡根据它所拥有的内容进行拉伸。例如，如果我有两个按钮，那么如果 mat 卡有一个列表，它的长度就会不同。你有什么建议吗？

非常感谢大家

标签： angularangular-materialangular8

解决方案

如果你看起来像这样 CardStrech

我用 css

.container {
    margin: 36px auto;
    width: 640px;
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
}

mat-card {
    background-color: tomato;
    width: 320px;
    margin-right: 16px;
}

mat-card button {
    background-color: rgb(247, 248, 248);
    width: 100%;
    margin-bottom: 16px;
}

html示例：

<div class="container">
    <mat-card>
        <mat-card-title>Card 1</mat-card-title>
        <mat-card-content>
            <button mat-raised-button>Button 1</button><br>
            <button mat-raised-button>Button 2</button><br>
            <button mat-raised-button>Button 3</button>
        </mat-card-content>
    </mat-card>
    <mat-card>
        <mat-card-title>Card 2</mat-card-title>
        <mat-card-content>
            <mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>Expansion 1</mat-expansion-panel-header>
                    Content 1
                </mat-expansion-panel>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>Expansion 2</mat-expansion-panel-header>
                    Content 2
                </mat-expansion-panel>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>Expansion 3</mat-expansion-panel-header>
                    Content 3
                </mat-expansion-panel>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>Expansion 4</mat-expansion-panel-header>
                    Content 4
                </mat-expansion-panel>
            </mat-accordion>
        </mat-card-content>
    </mat-card>
</div>

推荐阅读