如何修复 CSS 样式答案

【问题标题】：How can I fix CSS styles如何修复 CSS 样式
【发布时间】：2022-11-16 06:09:24
【问题描述】：

我需要修改我的 CSS 样式，使设计看起来与下图完全一样

目前我的设计看起来像这样

这是我的代码

     <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>

.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; 
  }

白色的 div 我也需要保留它与图像相同。目前它占据了整个宽度，我希望它们并排放置，但红色标签留在底部。

【问题讨论】：

标签： html css angular

【解决方案1】：

对于项目容器，您可以使用网格：

.item-container {
  background-color: #f4f5f8;
  border-radius: 12px; 
  display: grid;
  grid-template-column: repeat(4, 1fr);
  grid-gap: 1rem;
}

这会将您的容器元素设置为具有连续 4 个项目的网格显示，并且单元格之间的间隙为 1rem。

【讨论】：