html - 如何使正方形在 html/css 的移动 View 中连续滚动？

Question

我在下方有一张截图，我已将其复制到 fiddle 中.在 fiddle 中，我制作了一个父 div，其中我提到了所有 2 行:

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

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

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

</div>

问题陈述:

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

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

Answer 1

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

.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>

更新 fiddle Here