0

Tengo el siguiente código de HTML que crea una caja con un producto "principal" para una tienda online

.C_tarjetahorizontal{
    width: 50%;
    border-radius: 6px;
    overflow: hidden;
    background-size: contain;
    background:#fff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
    transition: all 400ms ease-out;
    cursor: default;
}
<div class="C_tarjetahorizontal">
    <div class="card">
        </div>
        <figure>
            <img src="https://media.game.es/COVERV2/3D_L/172/172596.png" width="100%" alt="teclado">
            <div class="contenido">
                <span>
                    Producto <br>
                    Review del Producto
                    <br>
                </span>
                <a href="#"> comprar</a>
            </div>
        </figure>
</div>

No se si es por la imagen o algo que acomode mal, pero quiero que el texto se coloque del lado derecho y la imagen a la izquierda

2
  • 1 - Tu css aplica a .C_tarjetahorizontal, debería ser a .card. 2 - la etiqueta figure debe estar dentro de .card y .contenido debe estar fuera de figure. Commented el 19 jul. 2023 a las 13:50
  • ¿Bastaría con .contenido { text-align: end; } (?... Commented el 19 jul. 2023 a las 14:33

1 respuesta 1

0

Para lograr posicionar los elementos como quieres debes aplicar un par de estilos en tu caso a la etiqueta figure (no me centrare en la semántica html que tienes puesto a que ese no es el tema principal de tu pregunta), ahora en los estilos de figure debes añadir la propiedad display:inline-flex de esa manera los elementos se distribuirán horizontalmente de izquierda derecha en base al orden estructural de tu html, otra alternativa al display:inline-flex es usar display:flex o algun otro valor con comportamiento similar aplicado en la propiedad display pero tu caso no la requiere, te dejo un snippet usando display:inline-flex y de igual manera te dejo una referencia de la propiedad display para que te documentes https://developer.mozilla.org/es/docs/Web/CSS/display

.C_tarjetahorizontal{
    width: 50%;
    border-radius: 6px;
    overflow: hidden;
    background-size: contain;
    background:#fff;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
    transition: all 400ms ease-out;
    cursor: default;
}
figure{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
<div class="C_tarjetahorizontal">
    <div class="card">
        </div>
        <figure>
            <img src="https://media.game.es/COVERV2/3D_L/172/172596.png" width="100%" alt="teclado">
            <div class="contenido">
                <span>
                    Producto <br>
                    Review del Producto
                    <br>
                </span>
                <a href="#"> comprar</a>
            </div>
        </figure>
</div>

Tu Respuesta

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

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