如何让父容器横向滚动，子 div 并排排列？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《如何让父容器横向滚动，子 div 并排排列？》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

要实现父容器溢出滚动，子div横向排列的效果，可以使用以下代码：

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

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

原理：

• .ctn 设置 overflow-x: scroll 以启用水平滚动条。
• .ctn 设置 white-space: nowrap 以防止子元素换行，强制它们排列在同一行上。
• 子元素设置为 display: inline-block 以使它们在水平方向上排列，并允许它们根据内容宽度自动调整大小。

到这里，我们也就讲完了《如何让父容器横向滚动，子 div 并排排列？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！