如何使正方形在 html/css 的移动视图中连续滚动？答案

【问题标题】：How to make the squares scroll in a row in a mobile view in html/css?如何使正方形在 html/css 的移动视图中连续滚动？
【发布时间】：2018-11-07 20:20:00
【问题描述】：

我有一个截图，我在fiddle 中复制了它。在小提琴中，我制作了一个父 div，其中我提到了所有 2 行：

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

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

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

</div>

问题陈述：

我想让移动/平板电脑视图中的单个行滚动。我为了让它滚动而尝试的 CSS 代码如下，它似乎不起作用。我是否还需要设置最小宽度才能使行在移动/平板电脑视图中滚动？

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

【问题讨论】：

标签： html css responsive-design media-queries horizontal-scrolling

【解决方案1】：

1) 您需要将overflow-x 设置为.product-contents 以便它显示在小屏幕上滚动
2) 将min-width 设置为.product，这样它就不会变小了设备
3) 在.product 中使用:not 选择器，设置margin-right 以便空格每个项目之间将保留
4) 从@media only screen and (max-width: 767px) 中的.product-all-contents 中删除white-space，因为现在不需要它

.product-contents {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  overflow-x: auto;
}
.product-contents .product {
  width: 10%;
  min-width: 90px;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}
.product-contents .product:not(:last-child) {
    margin-right: 15px;
}
.product-contents .product img {
  max-width: 100%;
}

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

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

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

<div class="product-contents">
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
  <div class="product"><img src="http://via.placeholder.com/150x150" alt="" /></div>
</div>

</div>

更新小提琴Here

【讨论】：

我已经为您的答案创建了小提琴。虽然，我可以看到一些滚动，但它们仍然完好无损。我需要增加最小宽度吗？
你能分享fiddle链接吗？
您可以将min-width 设置为product，例如150px，它的发生是因为您在 product 中为 width 提供了 percentage
看起来不错，但是如果您现在检查一下，与桌面视图相比，移动视图中框之间的空间消失了。
让我们continue this discussion in chat。

【解决方案2】：

固定盒子的高度和宽度而不是使用百分比宽度是个好主意，因为这种页面布局将在所有屏幕上保持一致，并且用户还可以水平滚动单个产品行

只需更改您的 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;
  }
}

希望这对你有用:)

【讨论】：