3

No sé si estoy complicándome la vida. Lo único que quiero es que la parte donde aparece el porcentaje con color de fondo, aparezca alineado a la derecha, al igual que los números de arriba. Estoy usando display:flex y justify-content:right, que entiendo que debería desplazarme todo el contenido a la derecha, pero no es así.

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
    <div style="display:flex;flex-wrap:wrap;justify-content:right;width:100%;">
      <div style="background:#ff5454;display:flex;padding:3px;margin-top:4px;width:55px;justify-content: right;" class="current-discount">
        <p style="margin:auto;color:white;font-weight:500;">+21%</p>
      </div>
    </div>                                               
  </div>

2 respuestas 2

4

Simplemente añádele un margin-left: auto al div que contiene el número con tu porcentaje.

Por otro lado, no es necesario que englobes dicho div dentro de otro, podrías alinear directamente el div que contiene el texto, por lo que podrías eliminar el que contiene a ese div.

Para alinear el texto dentro de tu div a la derecha simplemente añade text-align: right.

Tu ejemplo modificado:

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
      <div style="background:#ff5454;text-align:right;padding:3px;margin-top:4px;width:55px; margin-left: auto;" class="current-discount">
        <p style="margin:auto;color:white;font-weight:500;">+21%</p>
      </div>
    </div>

IMPORTANTE: Te recomiendo que no utilices nunca o en la medida de lo posible estilos inline, es decir, que se encuentren en el propio elemento con el atributo style. En su defecto, utiliza ID's o clases en un fichero externo.

Puedes consultar esta pregunta para más información: ¿Cómo agregar código CSS a mi página?

También puedes consultar esta auto pregunta-respuesta mía hablando sobre porque no hay que utilizar estilos inline: ¿Qué es y para que se utiliza la especificidad de CSS?

1
  • ¡Gracias! Me ha servido.
    – user27826
    Commented el 14 ene. 2018 a las 19:10
1

No necesitas el display: flex; justify-content: right en el segundo div, con ponerle text-align:right quedará alineado a la derecha

<div style="max-width:20%;display:flex;flex-wrap:wrap;">
  <p class="old-price" style="width:100%;text-decoration: line-through;text-align:right;">19.99€</p>
  <p class="current-price" style="width:100%;font-size:18px;text-align:right;margin-top:4px;">24.99€</p>
  <div style="display:flex;flex-wrap:wrap;justify-content:right;width:100%;">
    <div style="background:#ff5454;padding:3px 0 3px 3px;margin-top:4px;width:55px;text-align: right;" class="current-discount">
      <p style="margin:auto;color:white;font-weight:500;">+21%</p>
    </div>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.