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

时间：2018-04-05 08:22:32

标签： html css layout flexbox

我正在寻求创建一个砌体UI。我在StackOverflow本身尝试了很多样本​​和许多答案，但似乎没有什么能帮助我。

我的情况是，我有一个包装ul，其高度为height: calc(100vh - 110px);，无法更改将会有一些动态图像插入此li ul我想让这个li作为图像内部排列。

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

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＆amp; HTML 唯一可以用于我的情况的解决方案。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：1)

您是否可以使用额外的包装？然后可以通过在父级上设置高度并添加overflow-y：auto;到此并在此包装器中添加实际列表。

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

答案 1 :(得分：0)

这里是使用flexbox的布局。这应该是它。

＆＃13;
＆＃13; 
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 */
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题