当屏幕仅通过 html / css 变窄时如何隐藏 div 块？

Question

需要提示。情况如下：有几个div用float属性排成一排。它们的最小宽度设置为 70 像素。目的是当浏览器window缩小时，那些不适合该区域的div被隐藏，而不是向下滑动一级。据我了解，这可以通过媒体查询来实现，但到目前为止我无法理解..

.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid var(--tomato);
  border-radius: 10px;
  background-color: var(--yellow);
  text-align: center;
  float: left; 
  min-width: 70px;
  width: 11.11%;
}

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

Answer 1

您可以通过将 overflow: hidden 添加到容器元素来实现。容器将是一个固定高度，不会让任何东西超出它，从而隐藏进入第二行的元素。

.item-container {
  height: calc(16px + 16px + 1em); /* margin top + padding + font size */
  overflow: hidden;
}
.item {
  padding: 16px;
  margin-top: 16px;
  border: 1px solid var(--tomato);
  border-radius: 10px;
  background-color: var(--yellow);
  text-align: center;
  float: left;
  min-width: 70px;
  width: 11.11%;
}

<div class="item-container">
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
  <div class="item">content</div>
</div>

当屏幕仅通过 html / css 变窄时如何隐藏 div 块？

How to hide div blocks when screen narrows only via html / css?

html

css

media-queries