1

Mi problema pasa porque no logró adaptar el contenido float en una caja. Básicamente, tengo un ul con 6 li cada uno con su respectivo img y p. Mi objetivo es que se posicionen 2 li por línea cuando la resolución mínima sea de 468px y 3 li cuando sea de 768px. Cada uno de estos li deberían tener separación entre si.

Floats no se adaptan a la box

CODIGO CSS

.lista-invitados li{
  padding: 10px;
  float: left;
}

@media only screen and (min-width:480px) {
  .lista-invitados li {
    width: 50%;
  }
}

@media only screen and (min-width:768px) {
  .lista-invitados li {
    width: 33.3%;
  }
}

.invitado {
  position: relative;
  overflow: hidden;
}

.invitado img {
  max-width: 100%;
}

El problema en cuestión es que el media query de 768px tome el 33.3% para cada li y que entren 3 por línea. No dos como me salen a mi y con ese espacio sin rellenar.

0

1 respuesta 1

0

Recomiendo que:

  • Trabajes este diseño mediante el módulo CSS Grid

  • De manera que el contenedor podrá mover a sus elementos internos sobre un grid bidimensional

  • Podemos dar de manera inicial un número determinado de columnas de esta forma:

    grid-template-columns: repeat(4, 1fr);
    
  • Posterior según cada media query podemos replantear ese acomodo únicamente indicando el número de columnas deseas

  • Te puedes evitar el dilema de los porcentajes si manejas las dimensiones mediante la unidad de medida fr

Quedando así:

    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .listado {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
      .listado-elementos {
        border: 1px solid;
        list-style: none;
      }
      
      @media screen and (min-width: 468px) {
        .listado {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      
      @media screen and (min-width: 768px) {
        .listado {
          grid-template-columns: repeat(3, 1fr);
        }
      }
    </style>
    <ul class="listado">
      <li class="listado-elementos">1</li>
      <li class="listado-elementos">2</li>
      <li class="listado-elementos">3</li>
      <li class="listado-elementos">4</li>
      <li class="listado-elementos">5</li>
      <li class="listado-elementos">6</li>
    </ul>

Ahora para dar un espacio entre los elementos, puedes valerte de grid-gap a nivel de la regla CSS para el contenedor así:

.listado {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
 }

De esta manera no dependerías de hacer flotantes a los elementos.

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.