1

estoy teniendo un problema en cuanto al posicionamiento de un elemento

dentro de una caja. El problema seria que no logro ubicar el contenido del texto entre el titulo y el precio, sino que siempre me va a quedar en la esquina inferior izquierda por mas que intento recolocarlo. Adjunto código y una imagen para ser mas claro. Cualquier idea o ayuda será agradecida. De antemano muchas gracias.

div.contenedorCarta{
        display: flex;
        flex-flow: row wrap;
        background-color: rgb(245, 245, 245);
        width: 30em;
        box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.2), 0 0.5em 1em 0 rgba(0, 0, 0, 0.2);
        margin: 1em;
    }

        .contenedorCarta h3{
            display: flex;
            justify-content: center;
            text-decoration: underline;
            font-size: 1.5em;
            height: 1.5em;
            width: 70%;   
        }

        .detalleProducto{
            display: flex;
        }

        .precioProducto{
            display: flex;
            justify-content: flex-end;
            font-size: 1.3em;
            width: 40%;
            height: 1.5em;
        }

Creo que se entiende donde esta ocurriendo mi problema.

3
  • y tu html? Si no tienes HTML no se verá nada Commented el 1 nov. 2020 a las 22:13
  • @Ruslan Lopez en que sentido? Yo lo estoy haciendo con React asi que se renderiza directo en el documento. Decis que me falto ponerlo aca en la consulta? Commented el 1 nov. 2020 a las 22:25
  • entonces te faltó agregarle el js, pensé que ya usarías JSX o TSX Commented el 1 nov. 2020 a las 23:40

1 respuesta 1

1

Procedimiento:

  • Crea una etiqueta article (una por cada card)
  • Dentro de cada una de estas insertamos la imagen
  • Dentro del article ponemos un div en el cual colocamos los otros tres elementos de texto cada uno en una etiqueta p

Posterior:

Estarías obteniendo dentro del article una imagen y un div, pero ahora se presenta el detalle que la imagen quedaría arriba del artículo, para solventar eso:

  • Le damos al article un display Flex

Ahora tenemos una imagen a lado de los textos, como los textos los pusimos en párrafos y están dentro del div quedarían uno sobre otro.

Los demás detalles estéticos para conseguir el aspecto de una card ya te lo dejo a ti

Propuesta de código:

    <style>
      * {
        border: 0;
        margin: 0;
        text-align: center;
      }
      .card {
        border: 1px solid;
        display: flex;
        justify-content: space-around;
        padding: 10px;
        width: 300px;
      }
      .card-img {
        border: 1px solid;
        height: 60px;
        width: 60px;
        margin-right: 10px;
        min-height: 100%;
        border-radius: 50%;
      }
      .card-container {
        border: 1px solid;
        width: 200px;
      }
    </style>
    <article class="card">
      <span class="card-img">
      </span>
      <div class="card-container">
          <p class="card-container__text">
           Texto 1
          </p>
          <p class="card-container__text">
           Texto 2
          </p>
          <p class="card-container__text">
           Texto 3
          </p>
      </div>
    </article>

Y así luciría en el navegador:

introducir la descripción de la imagen aquí

Nota

  • Este ejemplo es didáctico, habrá cosas como el span y los bordes que tal vez tendrás que remover, de modo que maquetes tus cards con la estructura esperada.
1
  • 1
    Gracias @BetaM, me la dejaste mucho mas clara para encarar la construcción de la carta. Un gusto, saludos. Commented el 2 nov. 2020 a las 11:57

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.