html 元素不适合父 div 时如何隐藏它们？

Question

我试图让我的鞋子看起来是内嵌的，但当另一只鞋子不合脚时，我不会再换到第二排。我基本上希望它隐藏所有无法放入父级的 div。我试过 overflow 和 white-space: nowrap 但似乎无法让它不转到第二行。

Answer 1

有多种方法可以解决这个问题。可以使用css-grid、绝对位置、flex等。

但是基本的想法是有一个容器，它有一个设置了宽度（例如屏幕的长度）的容器，它隐藏了溢出，所以任何溢出都会被隐藏。在它里面有一个包装容器，其宽度可以根据需要扩展。在里面你放了所有的卡片容器。这样包装就可以尽可能多地延伸到一边，父容器隐藏溢出。

我用 display: flex 做了一个例子：https://codesandbox.io/s/modest-mendeleev-w4j9r?file=/style.css

在示例中，每张卡片的高度设置为 60 像素，但您可以使用任何您想要的，包括根据您的图像侧来放大。卡片的宽度基于内容（在这种情况下是图像大小）。无论内容多长，都不会出现在第二行。所有图像都根据高度放大/缩小，但这也可以设置为设置宽度但高度放大/缩小，或者即使包裹 div 将根据图像高度放大。

您可以应用一个简单的 JavaScript 函数来旋转图像，就像某种图片库一样。