时间戳

首页 > 解决方案 > Flexbox 过滤器问题

jquery - Flexbox 过滤器问题

问题描述

我有一个跟随宽度的弹性框：calc(100% / 3);css。如果有超过 6 个 div，这很适合屏幕。但是，我有一个过滤系统，因此用户可能只能过滤和显示 2 个 div。然后这显示了很多空白，有没有人知道我该如何解决这个问题？

在过滤器上，我尝试更改宽度，但这超出了我们所追求的 3x2 设计。请在此处查看设计http://www.project-progress.co.uk/intersystems/category/finance/#blogs-filter

.tiles .tile {
  flex-basis: calc(100% / 2);
  width: calc(100% / 3);
  position: relative;
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}

.tiles .tile:nth-child(1n) {
  flex-basis: calc(50% / 1);
}

.tiles {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  overflow: auto;
  position: relative;
  overflow-x: scroll;
}
<div class="tiles" id="blog-posts">
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance6.jpg'); right: 0px;">
    dsf
  </div>
  <div class="tile scale-anm all successstories" style="background-image: url('http://www.project-progress.co.uk/intersystems/wp-content/uploads/2019/06/finance5.jpg'); right: 0px;">
    sdf
  </div>
</div>

标签： jqueryhtmlcssflexbox

解决方案

推荐阅读