如何实现父容器溢出滚动,子div横向排列?

如何实现父容器溢出滚动,子div横向排列?

在如何实现“父容器溢出滚动,子div横向排列”的问题中,能够让父容器溢出滚动并使子div横向排列,需要使用以下方案:

父容器设置

为父容器设置overflow-x: scroll属性,允许内容在水平方向上溢出。此外,还可以设置white-space: nowrap属性,防止子div换行。

子div设置

将所有子div设置为display: inline-block,使它们在水平方向上排列

以下示例代码演示了这种方法:

.ctn {
  overflow-x: scroll;
  white-space: nowrap;
  width: 100%;
}

.div1,
.div2,
.div3 {
  display: inline-block;
}

应用此代码后,父容器将允许水平滚动,而子div将横向排列

以上就是如何实现父容器溢出滚动,子div横向排列?的详细内容,更多请关注其它相关文章!