0

Las tarjetas se posicionan una abajo de la otra, pero quiero que se pongan una al lado de la otra. Probe con Space-Between, con Space-Evenly, con Justify-Content: Center; pero no lo soluciona. Seguramente el problema está en otra parte del codigo y eso es lo que no encuentro.

Como este bloque hay dos mas pero con poner esto ya se entiende:

.caja {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  flex-wrap: wrap;
  padding: 40px 0;
  background: #eef6fc;
  font-family: "Poppins", sans-serif;
}

.caja .card {
  position: relative;
  width: 320px;
  height: 440px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px -5px rgba(255, 255, 255, 0.5), inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px -5px rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  margin: 30px;
}

.caja .card .box {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: #eef6fc;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}
<div class="caja">
  <div class="card">
    <div class="box">
      <div class="content">
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, modi!</p>
        <a href="#">Ver más</a>
      </div>
    </div>
  </div>
</div>

3
  • Quieres que los div caja salgan uno a lado del otro?
    – user128299
    Commented el 22 nov. 2020 a las 22:32
  • O los div con id card?
    – user128299
    Commented el 22 nov. 2020 a las 22:45
  • Si, los div.caja uno al lado del otro Commented el 23 nov. 2020 a las 4:35

3 respuestas 3

2

te recomendaría quitar el max-width: 100%; y el flex-wrap: wrap; , este ultimo lo que hace es pasarte la card debajo del parámetro cuando ya esta ocupando el máximo del espaciado permitido.

1

Según entiendo tienes el siguiente código

<div class="caja">
  <div class="card">
    <div class="box">
      <div class="content">
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, modi!</p>
        <a href="#">Ver más</a>
      </div>
    </div>
  </div>


   <div class="card">
    <div class="box">
      <div class="content">
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, modi!</p>
        <a href="#">Ver más</a>
      </div>
    </div>
  </div>


    <div class="card">
    <div class="box">
      <div class="content">
        <h2>01</h2>
        <h3>Card One</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, modi!</p>
        <a href="#">Ver más</a>
      </div>
    </div>
  </div>





</div>



Y quieres que esas 3 o mas card estén una al lado de otra, prueba dándole a la clase .caja un display:inline;

Espero te sirva. creo que es lo que tratabas de decir en tu pregunta

0

Puedes usar display: inline-block, para todos los elementos que se encuentren dentro de la clase .box

.box * {
  display: inline-block
}
<div class="box">
  <div class="content">
    <h2>01</h2>

  </div>
  <h3>elemento h3</h3>
  <div>nuevo 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.

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