如何将 div 对齐到 mat-expansion-panel-header？答案

【问题标题】：How to align div to mat-expansion-panel-header?如何将 div 对齐到 mat-expansion-panel-header？
【发布时间】：2022-06-24 13:54:40
【问题描述】：

我被 Angular 的 MatExpansionModule 卡住了。在mat-expansion-panel-header 部分，我想显示一张图片和一个简短的描述。但是，图像和描述不会自动适应该部分。

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <div class="msg-header-img">
            <img [src]="picture" alt="pic description" />
        </div>
        <div class="msg-header-description">
            <h4>Hello</h4>
            <h6>{{ userName }}</h6>
        </div>
    </mat-expansion-panel-header>
    <p>some content</p>
</mat-expansion-panel>

如何正确设置样式，以便在扩展的标题部分正确呈现图像和描述？

编辑：样式表：

mat-expansion-panel {
    background-color: blueviolet;
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
}

.msg-header-img {
    border-radius: 50%;
    width: 40px;
    margin-top: 10px;
    padding-right: 10px;
    background-color: rgb(72, 72, 97);
}

.msg-header-description {
    width: auto;
    float: left;
    margin-top: 10px;
}

.msg-header-description h4 {
    font-size: 16px;
    width: 100%;
    color: #fff;
}

.msg-header-description h6 {
    font-size: 10px;
    line-height: 2px;
    color: #fff;
}

mat-expansion-panel-header {
    background-color: red;
}

我希望它看起来像这样：

【问题讨论】：

请分享它现在在 ui 中的外观、您希望它的外观以及您的样式类
当然，我编辑了答案:)

标签： angular angular-material mat-expansion-panel

【解决方案1】：

你的布局是错误的。您还应该使用 mat-panel-title 和 mat-panel-description 来管理一些职责，以便您可以简化：

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title class="msg-header-img">
            <img [src]="picture" alt="pic description" />
        </mat-panel-title>
        <mat-panel-description class="msg-header-description">
            <h4>Hello</h4>
            <h6>{{ userName }}</h6>
        </mat-panel-description>
    </mat-expansion-panel-header>
    <p>some content</p>
</mat-expansion-panel>

mat-expansion-panel {
  background-color: blueviolet;
  color: white;
}

.msg-header-img {
  flex-grow: 0;
}

.msg-header-img img {
  width: 40px;
}

.msg-header-description {
  flex-direction: column;
  align-items: flex-start;
  color: #fff;
}

.msg-header-description h4 {
  font-size: 16px;
  margin: 0;
}

.msg-header-description h6 {
  font-size: 10px;
  margin: 0;
}

【讨论】：