es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Alinear elementos CSS en una columna según el contenido.

19 Jun, 2023 Programación

Tengo el siguiente código HTML con su propio CSS y clases de bootstrap:

91.86

(+61%)

108.15

(+108%)

329.93

(+593%)

Y CSS:

.table-string {
width: 100%;
text-align: end;
}

Necesito recibir una columna como esta:

Pero en realidad obtengo esto:

¿Cómo alinear valores sin porcentajes en una columna para que estén estrictamente debajo uno del otro: cientos debajo de cientos, decenas debajo de decenas, unos debajo de unos? Y también el valor y el porcentaje deben alinearse al final del campo. Gracias por cualquier ayuda.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para alinear los valores en la columna sin porcentajes y hacer que aparezcan estrictamente debajo de cada uno, se puede agregar un ancho fijo al elemento p con la clase table-string. Esto garantizará que cada valor ocupe la misma cantidad de espacio y se alinee correctamente.

    Para alinear el valor y el porcentaje al final del campo, se puede agregar position: relative; al div con la clase d-flex y position: absolute; al elemento span con la clase ml-2. Luego, se puede ajustar la propiedad right del elemento span para colocarlo al final del div.

    Aquí está el HTML y CSS actualizado:

    HTML:

    <div class="d-flex position-relative">
  <p class="table-string">91.86</p>
  <span class="ml-2 position-absolute" style="right: 0;">(+61%)</span>
</div>
<div class="d-flex position-relative">
  <p class="table-string">108.15</p>
  <span class="ml-2 position-absolute" style="right: 0;">(+108%)</span>
</div>
<div class="d-flex position-relative">
  <p class="table-string">329.93</p>
  <span class="ml-2 position-absolute" style="right: 0;">(+593%)</span>
</div>

    CSS:

    .table-string {
  width: 80px;
  text-align: end;
}

.d-flex {
  margin-bottom: 10px;
  position: relative;
}

    En el CSS, se agregó un ancho fijo de 80px al elemento p con la clase table-string, y margin-bottom: 10px; al elemento div con la clase d-flex.

    Con estos cambios, los valores ahora deberían estar alineados debajo de cada uno y el valor y el porcentaje deberían estar alineados al final del campo.

Comments are closed.