如何修复CSS样式，使文件附件布局匹配设计图？

我需要修改CSS样式，让页面设计完全匹配目标效果，当前存在的问题：

• 白色容器（.item-list）当前占满整个宽度，需要改为并排排列
• 红色标签（.item-description）需保持在白色容器的底部

当前HTML代码 #

<div class="row">
  <h4 class="font-form">Documentos adjuntos</h4>
  <div class="item-container">
    <ng-container *ngFor="let item of listDoc">
      <div class="item-list">
        <img src="./assets/img/radicar.svg" alt="" height="40px" />
        <p class="item-text">{{ item.nombreArchivo }}</p>
        <a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
          <mat-icon class="icons">visibility</mat-icon>
        </a>
      </div>
      <div class="item-description">Acta</div>
    </ng-container>
  </div>
</div>

当前CSS代码 #

.item-container {
  background-color: #f4f5f8;
  border-radius: 12px; 
}

.item-list {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 5px 5px 5px 10px;
  border-radius: 5px 5px 5px 0px; 
}

.item-text {
  margin: 0px 30px 0px 15px;
}

.item-description {
  background-color: #BC293E;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 0px 0px 4px 4px; 
}

1. 调整HTML结构 #

将每个文档的.item-list和.item-description包裹在同一个容器中，确保标签始终位于容器底部：

<div class="row">
  <h4 class="font-form">Documentos adjuntos</h4>
  <div class="item-container">
    <ng-container *ngFor="let item of listDoc">
      <!-- 新增包裹容器 -->
      <div class="document-item">
        <div class="item-list">
          <img src="./assets/img/radicar.svg" alt="" height="40px" />
          <p class="item-text">{{ item.nombreArchivo }}</p>
          <a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
            <mat-icon class="icons">visibility</mat-icon>
          </a>
        </div>
        <div class="item-description">Acta</div>
      </div>
    </ng-container>
  </div>
</div>

2. 修改CSS样式 #

通过弹性布局实现并排，同时优化圆角、间距和文本溢出处理：

.item-container {
  background-color: #f4f5f8;
  border-radius: 12px;
  padding: 15px; /* 增加内边距匹配目标效果 */
  display: flex; /* 开启弹性布局实现并排 */
  gap: 15px; /* 控制文档项之间的间距 */
  flex-wrap: wrap; /* 超出宽度自动换行 */
}

/* 文档项包裹容器 */
.document-item {
  flex: 0 0 auto; /* 不拉伸，保持自身宽度 */
  max-width: calc(33.333% - 10px); /* 可选：每行显示3个，可根据需求调整 */
}

.item-list {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 5px 5px 5px 10px;
  border-radius: 5px 5px 0 0; /* 调整圆角，与下方标签衔接 */
  white-space: nowrap; /* 防止文件名换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 文件名过长时显示省略号 */
}

.item-text {
  margin: 0 30px 0 15px;
  flex: 1; /* 让文件名占据剩余空间 */
}

.item-description {
  background-color: #BC293E;
  color: #FFFFFF;
  padding: 5px 10px;
  border-radius: 0 0 5px 5px; /* 圆角与上方容器匹配 */
  font-size: 0.875rem;
}

关键调整说明 #

• 新增.document-item确保红色标签始终对应白色容器的底部
• 弹性布局实现文档项并排，flex-wrap保证响应式换行
• 统一圆角样式，让白色容器和红色标签形成完整的圆角卡片
• 添加文本溢出处理，避免长文件名破坏布局

内容的提问来源于stack exchange，提问作者joan0627