如何水平滚动 html/css 中连续出现的方形框？答案

【问题标题】：How to horizontally scroll the square boxes present in a row in html/css?如何水平滚动 html/css 中连续出现的方形框？
【发布时间】：2018-05-24 00:45:39
【问题描述】：

我有一个fiddle，它在桌面视图中看起来非常好，如下所示：

我用来水平对齐一排方块的 CSS 代码的 sn-ps 是：

.squares {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  position: relative;
  width: 70%;
  max-width: 1080px;
  margin: auto;
  flex-wrap: wrap;
}

问题陈述：

我想知道我应该在小提琴中添加哪些 CSS 代码，以便能够在类似于这样的移动视图中水平滚动方框：

【问题讨论】：

标签： html css scroll responsive-design media-queries

【解决方案1】：

您可以将overflow-y: auto 添加到.squares div 并删除flex-wrap: wrap。

看看这个fiddle

您还应该向.squares .square 提供min-width: 150px

【讨论】：

感谢您的回答。我希望桌面视图看起来与 fiddle 中的完全相同，但在移动视图中，相同的内容应该水平滚动。
在你的小提琴中，看起来一个方形盒子的宽度和高度正在扭曲。
见这里https://jsfiddle.net/e6gkejud/2/。将min-width: 300px 更新为150px
看起来不错，但在桌面视图下。我认为我们需要在媒体查询中添加 CSS 代码，以便在移动视图中滚动方块。我认为代码将进入此@media (min-width: 960px) { }，但我不确定其中将包含哪些代码。抱歉，我不擅长媒体查询。
您使用的是哪个浏览器？您运行的是 Windows 还是 macOS？

【解决方案2】：

仅查看图像的水平滚动。根据隶属关系参考，许多网站上都有此功能

Reference

【讨论】：