Question

我的页面顶部有一个导航栏。在其中我有5个不同公司的5个市场股票。我希望以全宽显示5，但随着窗口变小，我基本上想要的行为会切断溢出的行为，并调整剩余的行为以填充导航容器（所以让我们说一些指出它只显示3只股票并隐藏其他股票）。这是现在的代码：

.stocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 150px);
  grid-template-rows:1fr;
  grid-auto-rows: 0;
  overflow-y: hidden;
  justify-content: space-between;
  width: 75%;
  font-size: 11px;
  overflow-y: hidden;
}

目前这几乎是我所需要的。问题是，现在库存物品溢出，并且基本上应该创建一个新行，在第一行上面得到满足。同样，我不希望他们创建新行或可滚动。我根本不想让它们显示出来。有任何想法吗？

Answer 1

您可以使用CSS max-height和@media查询来实现此效果：

给.stocks-container一个max-height一个与单个网格行的高度相对应并声明overflow: hidden

这确保现在只有一行可见（即没有行的垂直包裹）。

现在添加一系列短点媒体查询，将grid-template-columns重置为视口宽度的百分比。

这使得仍然可见的网格框填充为.stocks-container保留的整个水平宽度。

工作示例：

＆＃13;

.stocks-container {
display: grid;
grid-template-columns: repeat(5, calc(20% - 6px));
grid-template-rows: 92px;
grid-column-gap: 6px;
grid-row-gap: 6px;
max-height: 92px;
font-size: 11px;
overflow: hidden;
}

.stocks-container div {
height: 80px;
text-align: center;
border: 1px solid rgb(127, 127, 127);
}

@media only screen and (max-width: 900px) {

    .stocks-container {
    grid-template-columns: repeat(4, calc(25% - 6px));
    }
}

@media only screen and (max-width: 750px) {

    .stocks-container {
    grid-template-columns: repeat(3, calc(33.33% - 6px));
    }
}

@media only screen and (max-width: 600px) {

    .stocks-container {
    grid-template-columns: repeat(3, calc(50% - 6px));
    }
}

＆＃13;

<div class="stocks-container">

<div>
<h2>Company 1</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 2</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 3</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 4</h2>
<p>Company Stock</p>
</div>

<div>
<h2>Company 5</h2>
<p>Company Stock</p>
</div>

</div>

＆＃13;

CSS如何只显示1行并隐藏其他行？

1 个答案: