Question

我的HTML如下：

<div class="product_details_container" fxLayout.xs="column" fxLayoutGap="15px">

<mat-card fxFlex="30" fxFlex.xs="100" class="image_container">
    <img mat-card-image src="../../../assets/img/img1.jpg" alt="">
    <mat-card-header >
        <img mat-card-avatar>
        <mat-card-title>The Silver Dress</mat-card-title>
        <mat-card-subtitle>Available in silver and gold.</mat-card-subtitle>
    </mat-card-header>        
</mat-card>

<mat-card fxFlex="40" class="" class="product_details">

    <mat-card-header fxLayout.xs="column">
        <mat-card-title class="contact_us">
            Buy Now. Contact us today using the following:
        </mat-card-title>
    </mat-card-header>

    <mat-card-content >
        <button  mat-button>
            <mat-icon svgIcon="facebookIcon"></mat-icon>
        </button>
        <button  mat-button>
            <mat-icon svgIcon="linkedinIcon"></mat-icon>
        </button>
        <button  mat-button>
            <mat-icon svgIcon="twitterIcon"></mat-icon>
        </button>
        <button  mat-button>
            <mat-icon svgIcon="instagramIcon"></mat-icon>
        </button>
        <button  mat-button>
            <mat-icon>email</mat-icon>
        </button>
    </mat-card-content>

    <mat-card-header >
        <mat-card-title>
            Product Description
        </mat-card-title>
    </mat-card-header>

    <mat-card-content>
            Acne Studios's sky-blue and white check Albany short-sleeved shirt is made from a lightweight textured cotton and linen-blend
        to an oversized fit with classic elements. The defined shape is softened with a box-pleat at the back and a curved hem. Fits
        true to size. Shown here with Marni Point-collar zip-through jacket , Bottega Veneta Straight-leg chino trousers and Prada
        Low-top Velcro trainers. Product number: 1191635
    </mat-card-content>

    <mat-card-header>
        <mat-card-title>
            Product Details
        </mat-card-title>
    </mat-card-header >

    <mat-card-content>                    
        <mat-list fxFlex="70">
            <mat-list-item> 50% Cotton </mat-list-item>
            <mat-list-item> Dry Clean </mat-list-item>
            <mat-list-item> Blue, Black </mat-list-item>
        </mat-list>

        <mat-card fxFlex="30" class="product_price mat-elevation-z0">
            <mat-card-title>  Price </mat-card-title>
            <mat-card-content> R450 </mat-card-content>
        </mat-card>
    </mat-card-content>
</mat-card>

组件的CSS代码：

.product_details_container {
    height: 100vh;
    padding: 70px 10px 10px 10px;
    overflow-y: scroll;

.image_container {
    // background-color: green;
}

.product_details {
    background-color: green;

    mat-card-header {
        border-bottom: 1px solid rgb(235, 234, 234);
        mat-card-title {
            font-size: 16px;
            font-weight: bold;
            color: rgb(136, 136, 136);
        }
        .contact_us {
            color: rgb(196, 127, 127);
            // background-color: red;
        }
    }
    mat-card-content {
        color: rgb(136, 136, 136);
        padding-bottom: 5px;
        line-height: 25px;
        mat-list {
            mat-list-item {
                color: rgb(136, 136, 136);
                height: 30px;
                font-size: 14px;
            }
        }
        button {
            margin-top: 15px;
        }
        .product_price {
            padding: 0;
            mat-card-title {
                color: rgb(136, 136, 136);
                height: 30px;
                font-size: 15px;
                padding-top: 10px;
            }
            mat-card-content {
                color: green;
                font-size: 20px;
                font-weight: bolder;
            }
        }
    }
}
}

上面的代码给出了下图所示的输出：

我的问题是，我似乎无法通过类似height: auto;的内容来调整绿色席子卡的高度以适应其内容。您能否帮我解决我可能做错的事情或者可能建议一种更好的方法来实现所需的行为。另外值得一提的是，在台式机上，高度调整得很好，只有在移动设备上它才能做到这一点。如果我硬编码高度，它可以工作，但目前这是不可取的。管理此mat-card的类没有应用CSS。

已编辑.product_details mat-card

<mat-card fxFlex="40" class="" class="product_details">
     <mat-card-header >
        <mat-card-title>
            Product Description
        </mat-card-title>
    </mat-card-header>

    <mat-card-content>
            Acne Studios's sky-blue and white check Albany short-sleeved shirt is made from a lightweight textured cotton and linen-blend
        to an oversized fit with classic elements. The defined shape is softened with a box-pleat at the back and a curved hem. Fits
        true to size. Shown here with Marni Point-collar zip-through jacket , Bottega Veneta Straight-leg chino trousers and Prada
        Low-top Velcro trainers. Product number: 1191635
    </mat-card-content>
</mat-card>

Answer 1

首先要做的事情是：您有两张卡片，可以通过课程image_container和product_details识别。我将它们分别称为IC和PD卡。

在您的IC卡中，您有一张mat-card-image 之前的图片 mat-card-header。我不知道Material如何处理卡片内部，但如果它被块显示，HTML流程就很重要。你应该把它放在后面。

在您的PD卡中，您有3 mat-card-header和3 mat-card-content。你不应该那样做。您可以选择制作其他卡片，或处理卡片中的显示器，但您应该不在同一张卡片中多次使用这些属性。

尝试这两种解决方案并告诉我它是如何工作的！

PS：我认为你的CSS没有问题，你没有触及流程，只有你的卡片/字体的风格，所以这部分没关系

角度材质：父级高度未调整为子高度

1 个答案: