0

我正在尝试创建一个水平滚动的小部件。很像图像轮播，但带有文本和图标。

它将有多个列，但任何时候只有一个可见。其余的都会有overflow: hidden。

为了使列大小相等，我正在查看 css-grid。例如，这使 3 个等宽的列：

display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:column;

但是，我想知道是否有办法将网格本身限制为一列宽。所以网格是一列宽，每列当然是一列宽。

结果是在 3 列布局上，2 列溢出，它们可以被隐藏。

如果不在网格本身上设置“px”宽度，不确定这是否可行。

4

1 回答 1

0

只需使用100%

.container {
  display: grid;
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  height:100px;
  overflow:auto;
}

.container > div {
  background:red;
  box-shadow:0 0 0 2px inset #000;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

如果您想处理更多列和间隙，则相关：响应式水平滚动 CSS Grid，每个断点具有固定数量的网格项

于 2021-03-10T19:40:37.367 回答