Desplazamiento horizontal usando css en la interfaz de usuario de mamp

Página de inicio > Desplazamiento horizontal usando css en la interfaz de usuario de mamp

Desplazamiento horizontal usando css en la interfaz de usuario de mampostería personalizada

Estoy en una búsqueda para crear una interfaz de usuario de mampostería. Probé muchas muestras y muchas respuestas en StackOverflow, pero nada parece ayudarme.

Mi situación es esta. Tengo un contenedor ul que tiene una altura de height: calc(100vh - 110px); que no puede cambiar. Se insertarán algunas imágenes dinámicas en el li de este ul Quiero que estos li se organicen como la imagen dentro de ellos.

El primer método que probé terminó dándome esto:

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  max-width: 100%;
}

.template-row {
  display: flex;
  flex-flow: row wrap;
  margin-left: -8px;
  /* Adjustment for the gutter */
  width: 100%;
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
}

.template-row li {
  flex: auto;
  height: auto;
  min-width: 150px;
  margin: 0 8px 8px 0;
  /* Some gutter */
  width: 30%;
  list-style: none;
}

<ul class="template-row">
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
</ul>

Como ves arriba, el li tiene la misma altura.

El segundo método que probé:

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  max-width: 100%;
}

.template-row {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.template-row li {
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

<ul class="template-row">
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
</ul>

Como puede ver arriba, el li está alineado correctamente pero el desplazamiento no está en la página.

¿Hay alguna solución exclusiva para CSS y HTML que pueda usar para mi situación? Cualquier ayuda sería apreciada.

Mostrar la mejor respuesta

#html #css #layout #flexbox

Publicado : 5 April, 2018 @ 08:22

CoenFuze

¿Es posible que utilice un envoltorio adicional? Entonces sería posible establecer la altura en el padre y agregar overflow-y: auto; a esto y agregue la lista real dentro de este envoltorio.

img {
  width: auto;
  height: auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}

.template-row {
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.template-row__body {
  list-style: none;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}

.template-row li {
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

<div class="template-row">
  <ul class="template-row__body">
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
  </ul>
</div>

ACTUALIZACIÓN: https://jsfiddle.net/0sapr5m0/15/

Publicado : 5 April, 2018 @ 09:22

Jithin Raj P R

Pero en este violín en pantalla completa, cuando verifica, puede ver que la imagen con menos ancho no está envuelta correctamente en el div, su padre es más ancho que el img

Publicado : 5 April, 2018 @ 09:35

CoenFuze

Oh, ya veo lo que quieres decir. Puede arreglar eso configurando img al 100%. Entonces esos se estirarán proporcionalmente a sus padres. Vea mi fragmento de código editado arriba.

Publicado : 5 April, 2018 @ 09:55

Jithin Raj P R

Verifique este violín: jsfiddle.net/jithinrajpr7/0sapr5m0, aunque lo arreglé en column-count: 3 todavía se está dando a ser 2 column ¿puedes arreglar esto?

Publicado : 5 April, 2018 @ 10:11

CoenFuze

Vea mi enlace jsfiddle en mi respuesta anterior. Eliminación de pantalla: bloque en línea; en el elemento de la lista lo resuelve. Esto estaba causando un espacio en blanco que estaba causando el salto de línea.

Publicado : 5 April, 2018 @ 10:23

Jithin Raj P R

Eso ya lo intenté pero está causando que el div se corte - jsfiddle.net/jithinrajpr7/0sapr5m0, mira este enlace

Publicado : 5 April, 2018 @ 10:28

CoenFuze

¿Tienes la posibilidad de usar flexbox en su lugar? En su primer ejemplo, no incluyó el relleno y la sombra del cuadro. En Chrome, esto es un "error" al usar css-columns.

Publicado : 5 April, 2018 @ 11:16

Jithin Raj P R

Si hay una solución en flexbox, estaría encantado de usarla. Gracias por tu esfuerzo.

Publicado : 5 April, 2018 @ 11:28

Jithin Raj P R

Iré con esto. Ajustaré esto con mi interfaz de usuario, Ty por tus esfuerzos. :)

Publicado : 5 April, 2018 @ 11:55

CoenFuze

Aquí está el diseño usando flexbox. Esto debería ser.

img {
  width: auto;
  height: auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}

.template-row {
  display: flex;
  flex-flow: row wrap;
  height: calc(100vh - 110px);
  overflow-y: auto;
  padding: .5rem; /* Fix box shadow at top, edit to your own values */
}

.template-row__body {
  list-style: none;
  display: inherit;
  flex-flow: inherit;
  flex: 1 1 100%;
  margin: -.5em; /* Corrects column margin */
}

.template-column {
  margin: .5em; /* Column gap */
  flex-basis: calc(33.33% - 1em);
  flex-grow: 1;
  flex-shrink: 1;
}

img {
  display: block;
  margin-bottom: 1em; /* Column gap * 2 */
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background-color: #fff;
  padding:5px;
  box-sizing: border-box; /* Fix padding */
}

<div class="template-row">
  <div class="template-row__body">
    <div class="template-column">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>      

    <div class="template-column">
       <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>  
    
    <div class="template-column">
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
    
  </div>
</div>

Publicado : 5 April, 2018 @ 11:47

Preguntas populares

5,523,184 ¿Cómo fuerzo a "git pull" a sobrescribir los archivos locales?

4,014,978 Cómo centrar horizontalmente un

3,567,265 ¿Cómo realizo un IF ... THEN en un SQL SELECT?

3,327,548 Llamar a un comando externo desde Python

3,118,498 ¿Cómo puedo comprobar si hay una cadena vacía / indefinida / nula en JavaScript?

2,988,021 ¿Cómo puede averiguar qué proceso está escuchando en un puerto en Windows?

2,846,957 Cómo validar una dirección de correo electrónico en JavaScript

Desplazamiento horizontal usando css en la interfaz de usuario de mampostería personalizada

Preguntas populares

Búsqueda de etiquetas