0

Estoy intentado posicionar dos elementos adentro de una card para un proyecto, y no comprendo el motivo por el cual no se comportan de la manera "esperable".

Intente solucionarlo con margin, pero no me parece la solución mas practica (se que me va traer problemas mas adelante).

Espero que sea legible Jsfiddle, ya que extrapole parte del código para que se vea más limpio el problema.

#container-card {
  background: pink;
  display: flex;
  flex-direction: column;
  overflow: scroll;
  height: 95%;
}

.card-recipe {
  background: lightblue;
  margin: .5em;
  max-height: 15em;
  max-width: 100%;
  height: 12em;
}

.img-recipe,
.content-card__recipe {
  display: inline-block;
  margin: 0 auto;
  height: 100%;
}

.img-recipe {
  width: 50%;
  background: violet;
}

.imagen {
  width: 100%;
  height: 100%;
}

.content-card__recipe {
  background: lightgreen;
  height: 100%;
  width: 45%;
}
<section id="container-card">
  <div class="card-recipe">
    <div class="img-recipe">
      imagen
    </div>
    <div class="content-card__recipe">
      <div class="card-title">
        <h4>Titulo de la tarjeta<h4>
      </div>
    </div>
  </div>
</section>

https://jsfiddle.net/h2asjp3k/15/

3
  • Cuál sería el comportamiento "esperable"?
    – KBeDev
    Commented el 20 jul. 2021 a las 21:58
  • El código debe ir en tu pregunta por favor, el editor te permite poner HTML, CSS y JS como un snnipet
    – user128299
    Commented el 20 jul. 2021 a las 21:59
  • Buenas, corregi lo del snippet, y por favor, detalle cual es el problema, y que buscas obtener.
    – Excorpion
    Commented el 20 jul. 2021 a las 22:01

1 respuesta 1

0

Los cuadros quedan desalineados a causa del h4 del título en el bloque izquierdo. Una solución es cmbiar el display flex del container a la tarjeta

#container-card {
  background: pink;
  overflow: scroll;
  height: 95%;
}

.card-recipe {
  background: lightblue;
 display: flex;
 flex-direction: row;
  margin: .5em;
  max-height: 15em;
  max-width: 100%;
  height: 12em;
}

Ahora la mitad izquierda puedes ponerla al 50% de ancho.

Tu Respuesta

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