我的页面顶部有一个导航。
其中我有 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;
}
目前这几乎是我所需要的。问题是,现在溢出的库存元素应该基本上创建一个新行,在第一行的顶部变得糊状。同样,我不希望他们创建一个新行,或者是可滚动的。我只是不想让他们表现出来。有任何想法吗?
最佳答案
您可以使用 CSS max-height
和 @media
查询以实现此效果:
.stocks-container
max-height
对应于单个网格行的高度并声明 overflow: hidden
这确保现在只有一行可见(即没有垂直环绕的行)。
grid-template-columns
作为视口(viewport)宽度的百分比。 这使得那些仍然可见的网格框可以填充为
.stocks-container
保留的整个水平宽度。 .工作示例:
.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));
}
}
<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>
关于CSS 如何只显示 1 行并隐藏其他行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50775325/