html / css中移动视图中的水平滚动答案

【问题标题】：Horizontal scrolling in mobile view in html/csshtml / css中移动视图中的水平滚动
【发布时间】：2018-05-23 14:09:15
【问题描述】：

我正在处理fiddle，我想在其中水平滚动 移动视图中的内容。

此时在桌面视图中，它们排列成一条直线，如下所示：

我希望以上内容在移动视图中滚动。

我用来在桌面视图中以直线对齐内容的 CSS 代码是：

.images {
  display: flex;
  align-items:center;
  background-color: #eee;
  padding: 1rem;


}

.images > div {
      flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}
.images img {
  max-width:100%;
  width: 100%;
}

问题陈述：

我想知道我应该在小提琴中添加哪些 CSS 代码，以便上述屏幕截图中的内容在移动视图中滚动。我尝试使用overflow: scroll and white-space: nowrap，但不知何故我无法在移动视图中滚动内容。

【问题讨论】：

标签： html css responsive-design media-queries

【解决方案1】：

尝试将 flex none 添加到 div 以保留它们的大小以及您希望桌面开始的媒体查询。

.images {
    display: flex;
    align-items:center;
    background-color: #eee;
    padding: 1rem;
    overflow-x: scroll;
}

.images > div {
    flex: none;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.images img {
    max-width:100%;
    width: 100%;
}

@media (min-width: 960px) {

  .images {
     overflow-x: visible;
  }

  .images > div {
    flex-basis: 0;
    flex-grow: 1;
   }
}

【讨论】：

我希望水平滚动出现在移动视图中。此时，它与您的 css 代码一起显示在桌面视图中。
@user5447339 然后使用@media 查询。
@Rawrplus 就像在桌面视图中一样，我希望看起来与小提琴中的外观相同。对于移动视图，@media screen and (max-width: 767px){ .images{ ; } }，我需要添加什么代码？抱歉，我不擅长媒体查询。
更新了媒体查询示例
@dbenmore 我已经接受了你的回答。如果我对此有任何疑问，我会告诉您。

【解决方案2】：

您可以将此 div 添加到您的代码中以滚动 水平。 在图片 1 中，您可以添加您的图片。（仅作为示例）

.container {
	width: 30em;
	overflow-x: auto;
	white-space: nowrap;
}

<div class="container">
<table>
	<tbody>
		<tr>
			<td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
                        <td>Image 1</td>
			<td>Image 2</td>
			<td>Image 3</td>
			<td>Image 4</td>
			<td>Image 5</td>
			<td>Image 6</td>
		</tr>
	</tbody>
</table>
</div>

【讨论】：