如何在html/css的移动视图中使正方形滚动成一行？

我有一个屏幕截图，下面是我在中复制的。在小提琴中，我制作了一个父div，其中我提到了所有2行：

<div class="product-all-contents">

<div class="product-contents">
</div>

<div class="product-contents">
</div>

</div>

• 1） 您需要将

  overflow-x

  设置为

  .product contents

  ，以便显示 在较小的屏幕上滚动
• 2） 将

  min width

  设置为

  .product

  ，使其在小屏幕上不会变小 装置
• 3） 使用

  .product

  中的

  ：not

  选择器，将

  边距设置为右侧

  ，以便 每个项目之间将保留
• 4） 从

  产品中删除
  空白
  。仅在
  @媒体中删除所有内容
  屏幕和（最大宽度：767px）

  ，因为现在不需要它

。产品内容{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
填充：1rem；
溢出-x：自动；
}
.产品内容{
宽度：10%；
最小宽度：90px；
文本对齐：居中；
高度：150像素；
垫面：1%；
左：1%；
右：1%；
边框样式：实心；
边框宽度：3倍；
边框颜色：rgb（145147150）；
背景色：白色；
边界半径：10px
}
.产品内容.产品：非（：最后一个孩子）{
右边距：15px；
}
.产品内容.产品img{
最大宽度：100%；
}
@仅介质屏幕和（最大宽度：767px）
{
.产品所有内容
{
溢出-x：自动；
}
}

---

最好固定框的高度和宽度，而不是使用百分比宽度，因为这样页面的布局在所有屏幕上都是一致的，用户还可以水平滚动单个产品行

只需按以下方式更改CSS规则我已更改了

.product

类的CSS规则，并为产品行中的水平滚动添加了一个额外的媒体查询

.product-contents .product {
    min-width: 160px;
    width:160px;
    text-align: center;
    height: 150px;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-left: 10px;
}

@media only screen and (max-width: 767px)
{
  .product-contents{
     overflow-x: auto;
  }
}

---

希望这对你有用：）

我为你的答案做了一把小提琴。虽然，我可以看到一些滚动，但它们仍然完好无损。我需要增加最小宽度吗？您可以共享

小提琴

链接吗？您可以为

产品

设置

min width

，例如

150px

，这是因为您在

产品
中为
宽度
提供了
百分比
，看起来不错，但是，如果您现在选中，与桌面视图相比，移动视图中框之间的空间消失了，它仍然存在。
.product-contents .product {
    min-width: 160px;
    width:160px;
    text-align: center;
    height: 150px;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    margin-left: 10px;
}

@media only screen and (max-width: 767px)
{
  .product-contents{
     overflow-x: auto;
  }
}