如何隐藏块答案

【问题标题】：How hide blocks如何隐藏块
【发布时间】：2021-02-06 05:46:37
【问题描述】：

共有11个block，每个block的最小宽度为100px，在一行中，父级的宽度为屏幕的100%。如何在父级的全宽中排列块，在改变分辨率的同时，不完全适合的块不会被转移，而是完全隐藏***

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid black;
  text-align: center;
  min-width: 110px;
  display: inline-block;
  width: 10%;

}

section{
  overflow: hidden;
  display: flex;
}

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

***，插图和我的代码如下：

【问题讨论】：

您想在任何分辨率下显示所有可见的 11 个块吗？
您将需要 javascript。
您想以任何分辨率显示所有 11 个可见块吗？是的。那么有可能。块的最小宽度为 110px 和 padding 16px，在小屏幕上不完全适合的 nlock 不会被转移必须隐藏

标签： html css flexbox media-queries

【解决方案1】：

我认为仅使用 CSS 没有任何简单的方法可以完成您所说的事情。您必须采用屏幕尺寸并根据该尺寸隐藏块的其余部分。

【讨论】：

【解决方案2】：

您可以为此使用 CSS 网格：

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid black;
  text-align: center;
}

section{
  overflow: hidden;
  height:50px;
  display: grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
}

<section>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</section>

【讨论】：