在自定义砌体 UI 中使用 css 水平滚动答案

【问题标题】：Horizontal scroll using css in custom masonry UI在自定义砌体 UI 中使用 css 水平滚动
【发布时间】：2018-09-14 23:43:42
【问题描述】：

我正在寻求创建一个砌体 UI。我在 StackOverflow 本身中尝试了许多示例和许多答案，但似乎没有任何帮助。

我的情况是这样我有一个包装器ul，它的高度为height: calc(100vh - 110px);，无法更改会有一些动态图像插入到这个ul 的li 我想要这个li 's 来排列它们里面的图像。

我尝试的第一种方法最终给了我这个：

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>

正如您在上面看到的，li 具有相同的高度。

我尝试的第二种方法：

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>

正如您在上面看到的，li 已正确对齐，但页面上的滚动消失了。

是否有任何仅适用于我的情况的 CSS 和 HTML 解决方案。任何帮助将不胜感激。

【问题讨论】：

标签： html css layout flexbox

【解决方案1】：

您可以使用额外的包装器吗？然后可以通过设置父级的高度并添加溢出-y：自动；并在此包装器中添加实际列表。

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>

更新：https://jsfiddle.net/0sapr5m0/15/

【讨论】：

但是在这个全屏的小提琴中，当你检查你可以看到宽度较小的图像没有正确包裹在div中，它的父级比img宽
哦，我明白你的意思了。您可以通过将 img 设置为 100% 来解决此问题。然后这些将与它的父母成比例地延伸。请参阅上面我编辑的代码 sn-p。
请检查这个小提琴 - jsfiddle.net/jithinrajpr7/0sapr5m0，即使我将它固定为 column-count: 3，它仍然是 2 column 你能解决这个问题吗？
在我之前的回答中查看我的 jsfiddle 链接。移除显示：inline-block；在列表项上解决它。这导致了导致换行的空白。
我已经尝试过了，但它导致 div 被切断 - jsfiddle.net/jithinrajpr7/0sapr5m0，检查此链接

【解决方案2】：

这是使用 flexbox 的布局。应该是这样的。

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>

【讨论】：