1

Necesito modificar mis estilos CSS para dejar el diseño igual al de la siguiente imagen Prototipo de diseño deseado

Por ahora tengo esto Prototipo actual aquí

Y este es mi código

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

No se cómo hacer para que se vea exactamente igual a la imagen, si necesito modificar mi CSS o también el HTML. Les agradeceria mucho su ayuda.

1
  • El div de color blanco necesito también dejarlo igual a la imagen. Actualmente esta ocupando todo el ancho, y quisiera que se posicionen uno al lado del otro, pero la etiqueta roja se mantenga abajo.
    – joan0627
    el 15 nov. 2022 a las 21:20

3 respuestas 3

0

Si te he entendido bien es esto lo que buscas, he añadido un ancho mínimo y le he aplicado un display inline-block. De forma predeterminada un div ocupa todo el ancho, y de esta manera se ajusta a su contenido

.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; 
  min-width: 125px;
  text-align: center;
  display: inline-block;
  }
<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>

0

Tendrías que usar la propiedad display: inline-block; para que el ancho se adapte al contenido, en este caso al texto:

.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;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 0px 0px 4px 4px; 
}
<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>

Edit: Para arreglar lo del div de color gris, se tendría que aplicar la misma propiedad del display, lo probaré añadiendo varios contenidos:

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

.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;
  display: inline-block;
  margin-bottom: 10px;
  border-radius: 0px 0px 4px 4px; 
}
<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 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 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 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>

5
  • Necesitaria también arreglar el div de color blanco, para que no ocupe todo el ancho y se posicione uno al lado del otro.
    – joan0627
    el 15 nov. 2022 a las 21:24
  • Edite mi respuesta, ahora el ancho del div color blanco será dependiendo del contenido y ya permitiría que se posicione uno al cada lado. el 15 nov. 2022 a las 21:36
  • No funciona amigo
    – joan0627
    el 15 nov. 2022 a las 22:28
  • Qué extraño, que intentas hacer con el div gris? como esperas que sea el resultado? me comentas que se posicione uno al lado del otro, y es justamente lo que hice... el 15 nov. 2022 a las 22:43
  • Es decir, el div de color blanco quiero que se posicione uno al lado del otro, y que la etiqueta roja se quede en la parte inferior izquierda de cada div blanco, tal como la primera imagen que puse. El div gris solo es el que contiene todos los div blancos. Hice lo que me dijiste pero no funciona. Esta es la imagen de como quiero que quede imagen
    – joan0627
    el 15 nov. 2022 a las 23:08
0

Si quieres acomodar todos los items uno a lado de otro, prueba usando flexbox. No sé qué tenga con exactitud tu clase "row", pero vamos a utilizar ese div como el contenedor principal y ese será el que contenga a todos los items.

También vamos a sacar la etiqueta <h4></h4> del contenedor principal

Quedaría así:

<body>

<h4 class="font-form">Documentos adjuntos</h4>

<div class="contenedor_principal">
      <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 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">Aceptaciones</div>
            </ng-container>
      </div>

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

Ahora que ya está agrupado todo en el div principal, vamos a hacer que sus elementos hijos (los divs con la clase "item-container") se comporten como flex. Para ellos agregamos:

.contenedor_principal {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}

Ahora que ya están acomodados, vamos a resolver el div de color rojo que ocupa todo el ancho, como bien te dijeron los demás, utilizamos display: inline-block; en tu clase de "item-description", quedaría así:

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

Y por último, le podemos dar un margin-bottom: 40px; a tu clase "item-container" para que no se vea amontonado, o como prefieras.

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

Saludos.

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.