文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在自定义砌体UI中使用css的水平滚动

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

Stack Overflow用户
提问于 2018-04-05 08:22:31
回答 2查看 126关注 0票数 0

我在寻求创建一个砖石用户界面。我在StackOverflow中尝试了许多示例和许多答案，但似乎没有什么能帮助我。

我的情况是，我有一个包装器ul，它的高度height: calc(100vh - 110px);是不能改变的，会有一些动态图像插入到这个ul的li中，我希望这个li作为它们内部的图像排列。

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

​

代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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都有相同的高度。

我尝试的第二种方法是：

​

代码语言：javascript
复制
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%;
}
代码语言：javascript
复制
<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
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-05 09:22:05

你能使用额外的包装器吗？然后，可以通过设置父文件的高度并添加overflow y: auto；，并在此包装器中添加实际的列表。

​

代码语言：javascript
复制
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%;
}
代码语言：javascript
复制
<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/

票数 1
EN

Stack Overflow用户

发布于 2018-04-05 11:47:42

这是使用柔性盒的布局。应该是这样的。

​

代码语言：javascript
复制
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 */
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49667493

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档